当我通信两个组件时，ReactJS with ES6 : this. props 不是一个函数

Question

我正在使用带有 ES6 的 ReactJS，但是我在通过 props 来沟通子 > 父时遇到了一些问题。我的方法示例:

class SearchBar extends React.Component {
  handler(e){
    this.props.filterUser(e.target.value);
  }

  render () {
  return <div>
    <input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler} />
  </div>
  }
}


export default class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '', age: '', filter: ''};
  } 

  filterUser(filterValue){
    this.setState({
      filter: filterValue
    });
  }

  render() {
    return <div>
      <SearchBar filterUser={this.filterUser} />
      <span>Value: {this.state.filter}</span>
    </div>
  }
}

这将返回未捕获的类型错误:this.props.filterUser不是函数。

有什么想法吗？也许绑定(bind)？

[编辑]解决方案(感谢@knowbody和@Felipe Skinner):

我的构造函数中缺少绑定(bind)。 SearchBar 构造函数中的绑定(bind)工作得很好。

使用React.createClass() (ES5)，它会自动为您的函数绑定(bind)到this。在 ES6 中，您需要手动绑定(bind) this 。更多信息https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Answer 1

您的构造函数中缺少绑定(bind)，如果您不在构造函数中使用它们，则无需传递 props 。您还需要从'react'导入{PropTypes}

class SearchBar extends React.Component {

  constructor() {
    super();
    this.handler = this.handler.bind(this);
  }

  handler(e){
    this.props.filterUser(e.target.value);
  }

  render () {
    return (
      <div>
        <input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler} />
      </div>
    );
  }
}


export default class User extends React.Component {
  constructor() {
    super();
    this.filterUser = this.filterUser.bind(this);
    this.state = { name: '', age: '', filter: '' };
  } 

  filterUser(filterValue){
    this.setState({
      filter: filterValue
    });
  }

  render() {
    return ( 
      <div>
        <SearchBar filterUser={this.filterUser} />
        <span>Value: {this.state.filter}</span>
      </div>
    );
  }
}