反应onClick事件不工作

Question

我试图让onClick事件在React中工作，但没有运气。我不知道什么是热潮

var Item = React.createClass({ 
    render: function(){ 
    return <div>{this.props.text}</div>; 
    } 
}); 

var ItemList= React.createClass({ 
handleClick: function(i){ 
    console.log("clicked",i) 
}, 
renderListItems: function() { 
    var list = []; 
    for (var i = 0; i < 9; i++) { 
    var text = "item " + i; 
    list.push(<Item key={i} text={text} onClick={this.handleClick.bind(this,i)} />) 

    } 
    return list; 
}, 

render: function() { 

    return (
    <div> 
    { 
     this.renderListItems() 
    } 
    </div> 
) 
}}); 


ReactDOM.render(
    <ItemList />, 
    document.getElementById('container') 
); 

任何想法，为什么它不工作？

这里是该代码演示上面https://jsfiddle.net/69z2wepo/55485/

Answer 1

你需要通过对div在Item成分通过您的onClick处理程序：

var Item = React.createClass({ 
    render: function(){ 
    return <div onClick={this.props.onClick}>{this.props.text}</div>; 
    } 
}); 

Answer 2

onClick处理程序没有在Item组件提及。

var Item = React.createClass({ 
    render: function(){ 
    return <div onClick={this.props.onClick}>{this.props.text}</div>; 
    } 
}); 

更新工作的小提琴是在这里：https://jsfiddle.net/69z2wepo/55503/