ReactJS con ES6: this.props non è una funzione quando comunico due componenti

Question

Sto lavorando con ReactJS con ES6, ma ho alcuni problemi a comunicare child> parent attraverso gli oggetti di scena. Esempio del mio approccio:

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

Questo restituisce Uncaught TypeError: this.props.filterUser is not a function.

Qualche idea? Forse vincolante?

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

mi mancava vincolante nel mio costruttore. Il binding nel costruttore di SearchBar funziona perfettamente.

Utilizzando React.createClass() (ES5), esegue automaticamente le associazioni su this per le proprie funzioni. In ES6 è necessario associare manualmente this. Maggiori informazioni https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Answer 1

Il binding è mancante nel costruttore, inoltre non è necessario passare props se non lo si utilizza nel costruttore. Inoltre è necessario 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> 
    ); 
    } 
} 

Answer 2

Quando si utilizza React.createClass(), esegue automaticamente associazioni a questo per le proprie funzioni.

Poiché si utilizza la sintassi della classe ES6, è necessario eseguire tali associazioni da soli. Ecco due opzioni:

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

Oppure si potrebbe legare sul vostro costruttore in questo modo:

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

Si può leggere su questo sulla documentazione: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Si noti che queste due opzioni sono si escludono a vicenda.