Связь между дочерним компонентом Реагента

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 Все работы идеально, если ребенок-компонент один. Но если я попытаюсь создать список дочернего компонента, это не сработает. Журнал ошибок записывает, что «это» не находит. я найти похожей проблему, 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>