对组件上的点击事件做出反应

React onClick event on component

本文关键字：事件 组件      更新时间：2023-09-26

我有一个名为 <SensorList /> 的 React 组件，它有许多子<SensorItem />（另一个 React 组件）。我希望能够在<SensorList />内在每个<SensorItem />上声明一个onClick事件。我尝试执行以下操作：

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事件，上述函数体应如此。

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

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

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

问题

正如另一个答案所解释的那样，问题在于<SensorItem> React组件上的onClick（与<div>或<p>等本机DOM元素相反）被视为组件属性的传递，而不是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>
  );
}

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

<SensorItem onClick={...} />
相关文章：