在组件上反应onClick事件

Question

我有一个叫做React的组件<SensorList />，有很多子<SensorItem />组件（另一个React组件）。我希望能够从内部onClick对每个事件声明一个事件。我尝试执行以下操作：<SensorItem />``<SensorList />

sensorSelected: function(sensor) {
    console.log('Clicked!');
},

render: function() {
    var nodes = this.state.sensors.map(function(sensor) {
        return (
            <SensorItem onClick={ this.sensorSelected } />
        );
    }.bind(this));

    return (
        <div className="sensor-list">
            { nodes }
        </div>
    );
}

不用说，我没有得到任何“点击！” 出现在我的控制台中 Chrome中的React检查器会指示onClick事件已注册，并应使用上述功能体进行注册。

因此，我得出结论，我无法onClick在实际<SensorItem />标签上注册事件（不过，我不确定为什么会这样）。我如何才能实现这一目标呢？

Answer 1

这取决于您的SensorItem组件的定义。因为SensorItem不是 本机DOM元素， 而是您所说的另一个React组件，所以这里定义的
onClick 只是该组件的属性。您需要做的是，在SensorItem组件内部，将onClick属性传递给DOM组件的onClick事件：

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