带有 ES6 的 ReactJS:当我通信两个组件时 this.props 不是一个函数 [英] ReactJS with ES6: this.props is not a function when I communicate two components

问题描述

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

class SearchBar 扩展 React.Component {处理程序(e){this.props.filterUser(e.target.value);}使成为 () {返回 
<input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler}/>
}}导出默认类用户扩展 React.Component {构造函数(道具){超级(道具)；this.state = {name: '', age: '', filter: ''};}过滤器用户(过滤器值){this.setState({过滤器:过滤器值});}使成为() {返回 
<SearchBar filterUser={this.filterUser}/><span>值:{this.state.filter}</span>
}}

返回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

解决方案

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

class SearchBar 扩展 React.Component {构造函数(){极好的();this.handler = this.handler.bind(this);}处理程序(e){this.props.filterUser(e.target.value);}使成为 () {返回 (<div><input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler}/>

);}}导出默认类用户扩展 React.Component {构造函数(){极好的();this.filterUser = this.filterUser.bind(this);this.state = { name: '', age: '', filter: '' };}过滤器用户(过滤器值){this.setState({过滤器:过滤器值});}使成为() {返回 (<div><SearchBar filterUser={this.filterUser}/><span>值:{this.state.filter}</span>

);}}

I'm working with ReactJS with ES6, but I have some problems to communicate child > parent through props. Example of my approach:

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 returns Uncaught TypeError: this.props.filterUser is not a function.

Any idea? Binding maybe?

[EDIT] Solution (Thanks @knowbody & @Felipe Skinner):

I was missing binding in my constructor. Binding in the SearchBar constructor works perfectly.

Using React.createClass() (ES5), it automatically does bindings to this for your functions. In ES6 you need bind this manually. More info https://facebook.github.io/react/docs/reusable-components.html#es6-classes

解决方案

You are missing binding in your constructor, also you don't need to pass props if you are not using them in the constructor. Also you need to 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>
    );
  }
}

这篇关于带有 ES6 的 ReactJS:当我通信两个组件时 this.props 不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！