反應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/