ReactJS 与 ES6：当我通信两个组件时 this.props 不是一个函数答案

【问题标题】：ReactJS with ES6: this.props is not a function when I communicate two componentsReactJS 与 ES6：当我通信两个组件时 this.props 不是一个函数
【发布时间】：2015-09-17 10:29:32
【问题描述】：

我正在使用带有 ES6 的 ReactJS，但是我在通过 props 与 child > parent 交流时遇到了一些问题。我的方法示例：

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>
  }
}

这将返回Uncaught TypeError: this.props.filterUser is not a function。

有什么想法吗？可以绑定吗？

[EDIT] 解决方案（感谢@knowbody 和@Felipe Skinner）：

我的构造函数中缺少绑定。 SearchBar 构造函数中的绑定工作完美。

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

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

就我而言，我以错误的方式导入组件。我有组件“HomeAdmin”和“Register”。

我在 HomeAdmin.js 中有这个： import { Register } from "/path/to/register"

改成这个并工作： import Register from "/path/to/register"

【讨论】：

【解决方案2】：

你的构造函数中缺少绑定，如果你没有在构造函数中使用它们，你也不需要传递props。另外你需要import { PropTypes } from 'react'

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>
    );
  }
}

【讨论】：

不错！工作，但抛出一个错误“意外的令牌”设置 propTypes 这样。 SearchBar.propTypes = { filterUser: React.PropTypes.func }; 效果更好。
sorry修好了，我之前用的是ES7方式facebook.github.io/react/blog/2015/01/27/…
是的，当然。无论如何，这无需设置 propTypes 即可工作，你是对的：我的构造函数中缺少绑定。 SearchBar 构造函数中的绑定完美运行。
@skozz 很高兴我能帮上忙
嘿，我在 reactnative 中尝试类似的实现，但它抛出错误“this.props.filterUser is not a function”。谁能告诉我我做错了什么。我的代码与上述解决方案中的内容相似

【解决方案3】：

当你使用 React.createClass() 时，它会自动为你的函数绑定到 this。

由于您使用的是 ES6 类语法，因此您需要自己进行这些绑定。这里有两个选项：

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

或者你可以像这样将它绑定到你的构造函数上：

constructor(props) {
    super(props);
    this.state = {name: '', age: '', filter: ''};
    this.filterUser = this.filterUser.bind(this);
  }

您可以在以下文档中阅读：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

请注意，这两个选项是互斥的。

【讨论】：