如何在组件上反应onClick事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (68)

我有一个名为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 />标签上注册事件(但我不确定这是为什么)。我该如何去实现这一目标呢?

提问于
用户回答回答于

这取决于SensorItem组件的定义。由于SensorItem不是本地DOM元素,另一个React组件onClick在此定义为该组件的属性。需要做的是,在SensorItem组件内部将onClick道具传递给DOM组件的onClick事件:

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

所属标签

可能回答问题的人

  • 应用案例分享

    1 粉丝490 提问5 回答
  • Hyman.W

    15 粉丝0 提问3 回答
  • 找虫虫

    5 粉丝0 提问3 回答
  • uncle_light

    5 粉丝518 提问3 回答

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动