在組件上反應 onClick 事件

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事件，上面的函數體應該是這樣。

因此，我得出的結論是，我無法在實際的<SensorItem />標簽上注冊onClick事件（但是，我不確定為什么會這樣）。 否則我如何實現這一目標？

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>
    );
  }
});

Answer 2

問題

正如在另一個答案中所解釋的，問題在於<SensorItem> React 組件上的onClick （與<div>或<p>等本機 DOM 元素相反）被視為組件屬性的傳遞，而不是 DOM 事件處理程序的傳遞. 而且很可能您的<SensorItem>組件沒有聲明onClick屬性，該屬性值只會丟失。

解決方案

最直接的解決方案是在SensorItem組件上顯式添加onClick屬性，然后將其傳遞給該組件的根 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={...} />