Question

首先，我是ReactJS的新手，如果这是基本知识，请对不起。我试图将我的文本框（SearchBox）保留在单独的文件中，以实现可维护性。我在“主”类中定义了搜索功能。

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

TypeError：无法读取未定义的属性“ bind”

我在做什么错了？

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。您应该将此方法声明为静态的。

如何将onChange事件绑定到导入类中的函数？

1 个答案: