Reagieren onClick-Ereignis auf Komponente

Question

Ich habe eine React-Komponente namens <SensorList />, die viele Kind hat <SensorItem /> s (eine andere React-Komponente). Ich möchte in der Lage sein, ein onClick Ereignis auf jedem <SensorItem /> von innerhalb <SensorList /> zu deklarieren. Ich habe versucht, folgendes zu tun:

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

unnötig zu sagen, ich bekomme keine "Clicked!" in meiner Konsole auftauchen. Der React-Inspector in Chrome zeigt an, dass ein onClick -Ereignis registriert ist, mit der obigen Funktion body, wie es sein sollte.

Ich schließe daher, dass ich onClick Ereignisse auf die tatsächlichen <SensorItem /> Tags nicht registrieren kann (ich bin mir nicht sicher, warum das ist, jedoch). Wie kann ich das sonst erreichen?

Answer 1

Dies hängt von der Definition Ihrer SensorItem-Komponente ab. Da SensorItem kein natives DOM-Element ist aber, wie Sie sagten, eine andere React-Komponente, onClick wie hier definiert ist einfach eine Eigenschaft dieser Komponente. Was Sie tun müssen, ist, innerhalb der SensorItem Komponente passieren prop die onClick auf ein onClick-Ereignis des DOM Komponente:

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