React e associazione dati

Question

Ho una coppia di componenti padre e figlio che mi ha bloccato con l'associazione dati.

Un componente di livello superiore renderà un nuovo componente Question:

<Question updateScore={this.updateScore} /> 

Procedimento updateScore vuole aggiornare un hash con valori numerici. Non è troppo importante. La componente domanda è abbastanza semplice:

var Question = React.createClass({ 
    getInitialState: function() { 
    return { options: blahBlahBlah }; 
    }, 

    updateScore: function(optionLabel) { 
    this.props.updateScore(optionLabel); 
    }, 

    render: function() { 
    var optionList = this.state.options.map(function(option) { 
     return (
     <QuestionItem optionLabel={option.optionLabel} description={option.description} 
         updateScore={this.updateScore} key={option.key} /> 
    ); 
    }.bind(this)); 

    return (
     <ul> 
     {optionList} 
     </ul> 
    ); 
    } 
}); 

La voce componenet domanda è ancora più semplice:

var QuestionItem = React.createClass({ 
    render: function() { 
    return (
     <li onClick={this.props.updateScore.bind(this, this.props.optionLabel)}> 
     {this.props.description} 
     </li> 
    ); 
    } 
}); 

Il problema è con l'implementazione corrente, la console sputa fuori questo errore:

"Warning: bind(): React component methods may only be bound to the component instance. See Question" 

Anche se registro il valore della partitura che viene aggiornata, vedo che non aggiorna nessuno dei tasti ma inserisce un indefinito:

{ labelOne: 0, labelTwo: 0, undefined: NaN } 

Come dovrei fare per legare questo?

Answer 1

Reagire in realtà auto-binds methods to the current component:

scope.props.updateScore.bind(null, this.props.optionLabel) 

Fornendo null invece di this voi permetterò a React di fare le sue cose.

Answer 2

MODIFICA: questa risposta è stata pubblicata prima della modifica della domanda. Lo tengo perché potrebbe aiutare gli altri in futuro

Quando si esegue () dopo la funzione si passa il risultato della funzione al componente Domanda. In questo modo, quando chiami il tuo this.props.updateScore ottieni solo il risultato della funzione invece di eseguirla.

È necessario passare il suo riferimento verso il basso in modo che il componente Domanda possa eseguirlo o collegarlo. In questo modo, quando si chiama this.props.updateScope si ottiene una funzione e può essere eseguita utilizzando this.props.updateScope() o associandola a this.props.updateScope.bind(this) ad esempio.

rimuovere quelle () come qui:

<Question updateScore={this.updateScore} /> 

e si dovrebbe essere pronti per partire

Answer 3

Questo avviso è legittimo in quanto il codice è vincolante QuestionItem invece di Question a updateScore(). Io suggerirei una delle due opzioni:

1) Dal momento che hai la proprietà optionLabel in Question, vincolare la funzione di là in modo che possa utilizzare il corretto this.

var optionList = this.state.options.map(function(option) { 
    return (
    <QuestionItem optionLabel={option.optionLabel} description={option.description} 
        updateScore={this.updateScore.bind(this, option.optionLabel)} key={option.key} /> 
); 
}.bind(this)); 

2) Se si desidera mantenere il legame all'interno QuestionItem, utilizzare una funzione wrapper in questo modo

var wrapperFunc = function(optionLabel) { 
     this.props.updateScore(optionLabel); 
}.bind(this, this.props.optionLabel); 

return (
    <li onClick={wrapperFunc}> 
    {this.props.description} 
    </li> 
);