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