React événement onClick sur le composant

Question

J'ai un composant React appelé <SensorList /> qui a beaucoup d'enfants <SensorItem />s (un autre React). Je veux pouvoir déclarer un événement onClick sur chaque <SensorItem /> de l'Intérieur <SensorList />. J'ai essayé de faire ce qui suit:

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

Inutile de dire que je ne reçois pas de "cliqué!" venir dans ma console. L'inspecteur React in Chrome] indique qu'un événement onClick est enregistré, avec le corps de fonction ci-dessus tel qu'il devrait être.

Je conclus donc que je ne peux pas enregistrer les événements onClick sur le <SensorItem /> tags (je ne sais pas pourquoi, cependant). Comment puis-je y parvenir autrement?

Answer 1

Cela dépend de la définition de votre composant SensorItem. Comme SensorItem n'est pas un élément du DOM natif , mais, comme vous l'avez dit, un autre React composant, onClick tel que défini ici est simplement une propriété de ce composant. Ce que vous devez faire est, à l'intérieur du composant SensorItem, transmettez la propriété onClick à l'événement onClick d'un composant DOM:

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