React bind nel costruttore, come passare i parametri agli oggetti di scena

Question

Sto provando a convertire le mie classi React in ES6, ma sto avendo qualche difficoltà all'interno di questo processo .. Mi piacerebbe avere i miei binding nel costruttore, non nel vista di rendering.

Ora, se ho un modulo principale con un setState che necessita di un parametro, ad esempio:

constructor() { 
    super(); 

    this.state = { 
     mood: "" 
    }; 

    this.updateMood(value) = this.updateMood.bind(this,value); 
} 

updateMood(value) { 
    this.setState({mood: value}); 
} 

Poi passaggio questa funzione per un componente:

<customElement updateMood={this.updateMood}></customElement> 

Poi all'interno del modulo customElement , ho qualcosa di simile:

constructor() { 
    super(); 
} 

update(e) { 
    this.props.updateMood(e.target.value); 
} 

e nel rendere:

<input onChange={this.update} /> 

È questo il modo corretto? Dal momento che non riesco a farlo funzionare ;-(

Answer 1

Non è possibile utilizzare questa this.updateMood(value) = this.updateMood.bind(this,value); costruzione, perché è errore di sintassi.

È possibile risolvere il problema come questo

class CustomElement extends React.Component { 
    constructor() { 
    super(); 
    this.update = this.update.bind(this); 
    } 

    update(e) { 
    this.props.updateMood(e.target.value); 
    } 

    render() { 
    return <input onChange={this.update} /> 
    } 
} 

class Parent extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     mood: "" 
    }; 

    this.updateMood = this.updateMood.bind(this); 
    } 

    updateMood(value) { 
    this.setState({ mood: value }); 
    } 

    render() { 
    return <div> 
     <CustomElement updateMood={this.updateMood}></CustomElement> 
     <h1>{ this.state.mood }</h1> 
    </div> 
    } 
} 

Example

Answer 2

oppure, a seconda delle impostazioni Babele, o quando si utilizza dattiloscritto, il seguente ottiene lo stesso, ma è molto più conveniente scrivere/mantenere:

class Parent extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     mood: "" 
    }; 
    } 

    updateMood = (value) => { 
    this.setState({ mood: value }); 
    } 
}