ReactJS с ES6: this.props не является функцией, когда я связываю два компонента

Я работаю с ReactJS с ES6, но у меня есть некоторые проблемы с передачей 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

Ответы

Ответ 1

Вам не хватает привязки в вашем конструкторе, также вам не нужно передавать 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>
    );
  }
}

Ответ 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

Обратите внимание, что эти два варианта являются взаимоисключающими.

Ответ 3

В моем случае я неправильно импортировал компонент. У меня есть компоненты "HomeAdmin" и "Регистрация".

У меня было это в HomeAdmin.js: import { Register } from "/path/to/register"

Поменял на это и сработало: import Register from "/path/to/register"