Question

我正在尝试让onClick事件在React中运行，但没有运气。我无法弄清楚什么是wronge

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')
);

知道为什么它不起作用吗？

以下是slice assignment

上面代码的演示

Answer 1

您需要将onClick处理程序传递到div组件中的Item：

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/

反应onClick事件不起作用

2 个答案: