Реагировать onClick-событие на компонент

У меня есть компонент React, называемый <SensorList />, который имеет много дочерних <SensorItem /> (другой компонент 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>
    );
}

Излишне говорить, что я не получаю никаких "кликов"! приходя в мою консоль. Инспектор React в Chrome указывает, что зарегистрировано событие onClick, причем указанное тело функции должно быть как есть.

Следовательно, я не могу зарегистрировать события onClick на фактических тегах <SensorItem /> (однако я не уверен, почему это так). Как мне добиться этого в противном случае?

ОТВЕТЫ

Ответ 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>
    );
  }
});