Как связать событие onChange с функцией из импортированного класса? - PullRequest
Новая
       7

Как связать событие onChange с функцией из импортированного класса?

0 голосов
/ 29 ноября 2018

Во-первых, я ОЧЕНЬ новичок в 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;

Спасибо!

1 Ответ

0 голосов
/ 29 ноября 2018

У вас есть две ошибки в коде.

В SearchBox.js, Employees не определено.Вместо этого следует использовать Main.Employees.

Во-вторых, filterEmployees - это метод экземпляра, а не метод класса, поэтому вы не можете вызвать Employees.filterEmployees.Вы должны объявить этот метод как статический.

...