リアクションの子コンポーネント間の通信

Question

私はすでに同様の質問をしましたが、私は新しい問題を抱えています）。私は親コンポーネントの子コンポーネント実行機能をクリックしながらしたい。子コンポーネントが1である場合

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>