React onClick événement sur le composant
J'ai un composant React appelé {[1] } qui a beaucoup d'enfants <SensorItem /> s (un autre composant React). Je veux pouvoir déclarer un événement onClick sur chaque <SensorItem /> depuis <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 aucun " cliqué!"venir dans ma console. L'inspecteur React dans Chrome indique qu'un événement onClick est enregistré, avec le corps de la fonction ci-dessus comme il se doit.
Je conclus, par conséquent, que je ne peux pas enregistrer onClick événements sur le balises <SensorItem /> réelles (Je ne sais pas pourquoi c'est, cependant). Comment dois-je aller sur la réalisation de ce le contraire?
1 réponses
Cela dépend de la définition de votre composant SensorItem. Parce que SensorItem n'est pas un élément DOM natif mais, comme vous l'avez dit, un autre composant React, onClick {[5] } 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, de passer l'accessoire onClick à l'événement onClick d'un composant DOM:
var SensorItem = React.createClass({
render: function() {
return (
<div className="SensorItem" onClick={this.props.onClick}>
...
</div>
);
}
});