web-dev-qa-db-ja.com

ReactコンポーネントのonClickイベント

多くの子<SensorList />s（別のReactコンポーネント）を持つ<SensorItem />というReactコンポーネントがあります。 <SensorItem />内から<SensorList />ごとに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>
    );
}

言うまでもなく、「クリック！」は表示されません。コンソールに表示されます。 ReactのChromeインスペクターは、onClickイベントが登録されていることを示します。上記の関数本体はそのままです。

したがって、実際の<SensorItem />タグにonClickイベントを登録できないと結論付けます（ただし、これがなぜなのかわかりません）。そうでなければ、これを達成するにはどうすればよいですか？

javascripteventsreactjs
43
GTF

これは、SensorItemコンポーネントの定義に依存します。 SensorItemはネイティブDOM要素ではないためですが、あなたが言ったように、別のReactコンポーネント、ここで定義されているonClickは、単にそのコンポーネントのプロパティです。SensorItemコンポーネントの内部で、onClickプロパティをDOMコンポーネントのonClickイベントに渡します。

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