Question

我正在使用带有ES6的ReactJS，但是我在沟通孩子方面遇到了一些问题＆gt;父母通过道具。我的方法示例：

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＆amp; @Felipe Skinner）：

我在构造函数中缺少绑定。 SearchBar构造函数中的绑定工作正常。

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

Answer 1

您在构造函数中缺少绑定，如果您没有在构造函数中使用它们，也不需要传递xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"。您还需要props

import { PropTypes } from 'react'

Answer 2

当你使用React.createClass（）时，它会自动为你的函数绑定它。

由于您使用的是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

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

Answer 3

在我的情况下，我以错误的方式导入了组件。我有组件“ HomeAdmin”和“注册”。

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

更改为此并工作： import Register from "/path/to/register"

ReactJS与ES6：当我传达两个组件时，this.props不是一个函数

3 个答案: