ReactJS con ES6: this.props no es una función cuando comunico dos componentes

ecmascript-6

Question

Estoy trabajando con ReactJS con ES6, pero tengo algunos problemas para comunicar niño> padre a través de accesorios. Ejemplo de mi enfoque:

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>
  }
}

Esto devuelve Uncaught TypeError: this.props.filterUser is not a function .

¿Alguna idea? ¿Tal vez vinculante?

[EDITAR] Solución (Gracias @knowbody y @Felipe Skinner):

Me faltaba un enlace en mi constructor. El enlace en el constructor SearchBar funciona perfectamente.

Usando React.createClass() (ES5), automáticamente realiza enlaces a this para sus funciones. En ES6 necesita vincular this manualmente. Más información https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Answer 1

Cuando usa React.createClass (), automáticamente realiza enlaces a esto para sus funciones.

Como está utilizando la sintaxis de la clase ES6, debe hacer esos enlaces usted mismo. Aquí hay dos opciones:

render() {
    return <div>
      <SearchBar filterUser={this.filterUser.bind(this)} />
      <span>Value: {this.state.filter}</span>
    </div>
  }

O podría vincularlo a su constructor así:

constructor(props) {
    super(props);
    this.state = {name: '''', age: '''', filter: ''''};
    this.filterUser = this.filterUser.bind(this);
  } 

Puede leer sobre esto en los documentos: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Tenga en cuenta que esas dos opciones son mutuamente excluyentes.

Answer 2

En mi caso, estaba importando el componente de forma incorrecta. Tengo los componentes "HomeAdmin" y "Registrarse".

Tenía esto en HomeAdmin.js: import { Register } from "/path/to/register"

Cambió a esto y funcionó: import Register from "/path/to/register"

Answer 3

Falta el enlace en su constructor, tampoco necesita pasar props si no los está usando en el constructor. También debe 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>
    );
  }
}