使用ES6的ReactJS：当我传达两个组件时，this.props不是一个功能 [英] ReactJS with ES6: this.props is not a function when I communicate two components

问题描述

我正在与ES6的ReactJS合作，但是通过道具来沟通孩子>父母方面有一些问题。我的方法的例子：

  class SearchBar extends React.Component {
 handler（e）{
 this .props.filterUser（e.target.value）; 
} 
 
 render（）{
 return< div> 
< input type ='text'className ='from-control search-bar'占位符='搜索'onChange = {this.handler} /> 
< / div> 
} 
} 
 
 
导出默认类用户扩展React.Component {
构造函数（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> 
} 
} 
  

返回未捕获TypeError： this.props.filterUser不是一个函数。

任何想法？绑定可能吗？

解决方案（感谢@knowbody& @Felipe Skinner）：

我在我的构造函数中缺少绑定。使用 React.createClass（）（ES5），它会自动执行绑定到这个为您的功能。在ES6中，您需要手动绑定这个。更多信息 https://facebook.github.io/react/docs /reusable-components.html#es6-classes

解决方案

你在构造函数中缺少绑定，你也如果您不在构造函数中使用它们，则不需要通过 props 。另外，您需要从反应

 类 import {PropTypes} SearchBar扩展了React.Component {
 
 constructor（）{
 super（）; 
 this.handler = this.handler.bind（this）; 
} 
 
处理程序（e）{
 this.props.filterUser（e.target.value）; 
} 
 
 render（）{
 return（
< div> 
< input type ='text'className ='from-control search -bar'placeholder ='Search'onChange = {this.handler} /> 
< / div> 
）; 
} 
} 
 
 
导出默认类用户扩展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> 
）; 
} 
} 
  




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屋！