子プロップデータを親にプッシュする方法を短くする

Question

子プロップから親にデータをプッシュする方法がより短く、よりクリーンな方法はありますか？

var Parent = React.createClass({ 

    _result: function(data){ 
    console.log(data); 
    }, 

    render: function(){ 
    return(<Child bar={this._result} />) 
    } 

}); 

var Child = React.createClass({ 

    _foo: function(e){ 
    this.props.bar(e.target.value); 
    }, 

    render: function(){ 
    return(
     <div> 
     <input type="text" onChange={this._foo} /> 
     </div> 
    ) 
    } 

}); 

はonChange_foo()機能を持たずに単純化することができますか？入力の値を親関数_result()にプッシュするだけです。

Answer 1

あなたは_foo機能を取り除き、そしてちょうどonChangeに渡された機能を割り当てることができます。 onChangeは引数としてeventを渡すので、_result関数を少し調整する必要があります。ここに例があります：

var Parent = React.createClass({ 

    _result: function(e) { 
    console.log(e.target.value); 
    }, 

    render: function() { 
    return(<Child bar={this._result} />) 
    } 

}); 

var Child = React.createClass({ 

    render: function() { 
    return(
     <div> 
     <input type="text" onChange={this.props.bar} 
     </div> 
    ) 
    } 

}); 

Answer 2

このため、一部省略表現があります：

render: function(){ 
    return(
     <div> 
     <input type="text" onChange={e => this.props.bar(e.target.value)} 
     </div> 
    ) 
    }