在组件上反应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 prop传递给DOM组件的onClick事件:

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

Answer 2

问题

该问题，为在另一个答案解释的那样，是onClick在<SensorItem>阵营组分（违背等天然DOM元素<div>或<p>）被视为传递组件的属性，而不是的DOM事件处理程序。由于您的<SensorItem>组件很可能没有声明onClick属性，因此该属性值只会丢失。

解决方案

最直接的解决方案是onClick在SensorItem组件上显式添加属性，然后将其传递给该组件的根 DOM 元素：

function SensorItem({ prop1, prop2, onClick }) {
  (...)

  return (
    <p onClick={onClick}>
      (...)
    </p>
  );
}

但通常最适合我的解决方案是使用对象解构符号将所有未定义组件的属性分组，然后将它们全部传递给该组件内的根 DOM 元素。这样，您就可以通过onClick，onHover，className等，而无需为它们定义的每一个单独的属性：

function SensorItem({ prop1, prop2, ...rootDOMAttributes }) {
  (...)

  return (
    <p {...rootDOMAttributes}>
      (...)
    </p>
  );
}

无论您使用两种方法中的哪一种，处理程序现在都可以工作，因为它现在将附加到 的根 DOM 元素SensorItem：

function SensorItem({ prop1, prop2, onClick }) {
  (...)

  return (
    <p onClick={onClick}>
      (...)
    </p>
  );
}