React的孩子組件之間的溝通

Question

我已經問過類似的問題，但我得到新的問題）。我想點擊父組件的子組件執行功能。

var Fructs = ['banana', 'mango', 'potato']; 

var Kaka = React.createClass({ 
    render() { 
    return <div onClick={this.props.onClick}> Hell o forld </div> 
    } 
}); 

var Application = React.createClass({ 
    handle() { 
    console.log("took took"); 
    }, 
    render() { 
    console.log(this.props); 
    var mass = Fructs.map(function(data, index) { 
     return <Kaka key={index} onClick={handle.bind(this)}/> 
    }); 
    return (
     <div> 
     { mass } 
     </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    render() { 
    return (
     <div> 
     <Application /> 
     </div> 
    ); 
    } 
}); 

React.render(<App/>, document.getElementById('app')); 

Example on CodePen 所有的工作完美的，如果孩子組分之一。但如果我嘗試生成子組件的列表，它不起作用。錯誤的日誌寫入「this」未找到。 我發現類似的問題doc React，但我做wronп（請告訴我做什麼了？

Answer 1

您應該設置此爲.map回調，你也handle的方法，爲了得到它，你需要使用this.handle更改後.map應該看起來像這樣

var mass = Fructs.map(function(data, index){ 
    return <Kaka key={index} onClick={ this.handle.bind(this) } /> 
            ^^^^^^^^^^^ - get Component method 
}, this); 
    ^^^^ - callback context 

var Fructs = ['banana', 'mango', 'potato']; 
 

 
var Kaka = React.createClass({ 
 
    render() { 
 
    return <div onClick={this.props.onClick}> 
 
    Hell o forld  
 
    </div> 
 
    } 
 
}) 
 

 
var Application = React.createClass({ 
 
    handle() { 
 
    console.log("took took"); 
 
    }, 
 
    
 
    render() { 
 
    var mass = Fructs.map(function(data, index){ 
 
     return <Kaka key={index} onClick={ this.handle.bind(this) } /> 
 
    }, this); 
 

 
    return <div> 
 
     { mass } 
 
    </div> 
 
    } 
 
}) 
 

 
var App = React.createClass({ 
 
    render() { 
 
    return <div> 
 
     <Application /> 
 
    </div> 
 
    } 
 
}) 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>