将子道具数据推送给家长的较短途径

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。你必须稍微调整_result函数，因为onChange将通过event作为参数。下面是一个例子：

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