带有 ES6 的 ReactJS：当我通信两个组件时 this.props 不是一个函数

IT技术 reactjs ecmascript-6
2021-03-26 05:14:00

我正在使用带有 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.

任何的想法？可能绑定？

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

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

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

3个回答

您在构造函数中缺少绑定，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>
    );
  }
}
@skozz 很高兴我能帮忙
2021-05-26 05:14:00
当然是。无论如何，这无需设置 propTypes 即可工作，您是对的：我的构造函数中缺少绑定。SearchBar 构造函数中的绑定工作完美。
2021-05-28 05:14:00
嘿，我正在 reactnative 中尝试类似的实现，但它抛出错误“this.props.filterUser is not a function”。谁能告诉我我做错了什么。我的代码类似于上面解决方案中的内容
2021-06-01 05:14:00
好的！有效，但会引发错误“意外令牌”设置 propTypes 这样的。SearchBar.propTypes = { filterUser: React.PropTypes.func };效果更好。
2021-06-07 05:14:00
抱歉修复了，我之前用的是ES7方式facebook.github.io/react/blog/2015/01/27/...
2021-06-15 05:14:00

当你使用 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

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

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

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

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

其它你可能感兴趣的问题
上一篇围绕箭头主体的意外块语句 下一篇如何在reactjs中只允许文本框中的数字？