Question

我有一个名为<SensorList />的React组件，它有许多子<SensorItem /> s（另一个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 React组件上的<SensorItem>（与<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={...} />

在组件上反应onClick事件

2 个答案:

问题

解决方案