javascript - 如何将 onChange 事件绑定(bind)到导入类中的函数？

Question

首先，我对 ReactJS 非常陌生，如果这是基本的东西，我很抱歉。我试图将我的文本框(SearchBox)保存在一个单独的文件中以实现可维护性。我在“主”类中定义了搜索功能。

当我尝试将文本框绑定(bind)到导入的函数时，我不断收到错误消息:

TypeError: Cannot read property 'bind' of undefined

我做错了什么？

Main.js

import React, { Component } from "react";
import PropTypes from "prop-types";

const Context = React.createContext();

class EmployeeClass extends Component {
  state = {
    employees: []
  };

  componentWillMount() {
    this.filterEmployees();
  }

  filterEmployees = name => {
    fetch(`http://apicall.com?name=${name}`)
    .then(res => res.json())
    .then(res => {
      console.log(res) 
      this.setState({
       employees: res.results
      })
    })
  };

  performSearch(e) {
    this.filterEmployees(e.target.value)
  }

  render() {
    const { children } = this.props;
    return (
      <Main.Employees
        value={{
          ...this.state,
          filterEmployees: this.filterEmployees
        }}
      >
        {children}
      </Main.Employees>
    );
  }
}

export default { Employees: EmployeeClass };

SearchBox.js

import React from "react";
import Main from "../main";

const SearchBox = () => (
  <div>
    <input onChange={() => Employees.filterEmployees} type="text" className="input" placeholder="Search..." />
  </div>
);

export default SearchBox;

谢谢!

Answer 1

代码中有两个错误。

在 SearchBox.js 中，Employees 未定义。您应该使用 Main.Employees 来代替。

其次，filterEmployees是一个实例方法，而不是类方法，因此不能调用Employees.filterEmployees。您应该将此方法声明为静态方法。