☰

コンポーネントの onClick イベントに反応する 質問する

tag-icon • tag-icon javascript events reactjs
コンポーネントの onClick イベントに反応する 質問する

と呼ばれる React コンポーネントがあり<SensorList />、これには多くの子 (別の React コンポーネント) があります。内からそれぞれにイベント<SensorItem />を宣言できるようにしたいと考えています。次のことを試しました。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 />(ただし、その理由はよくわかりません)。それ以外の場合は、どうすればこれを実現できるでしょうか?

ベストアンサー1

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

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

おすすめ記事