घटक पर क्लिक करें घटक

Question

मेरे पास <SensorList /> नामक एक प्रतिक्रिया घटक है जिसमें कई बच्चे <SensorItem /> एस (एक और प्रतिक्रिया घटक) हैं। मैं <SensorList /> के भीतर से प्रत्येक <SensorItem /> पर onClick ईवेंट घोषित करने में सक्षम होना चाहता हूं। मैंने निम्नलिखित करने का प्रयास किया है:

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

कहने की जरूरत नहीं है, मुझे कोई भी "क्लिक नहीं किया गया"! मेरे कंसोल में आ रहा है। क्रोम में रिएक्ट इंस्पेक्टर इंगित करता है कि उपरोक्त फ़ंक्शन बॉडी के साथ onClick ईवेंट पंजीकृत है।

मैं निष्कर्ष निकाला हूं कि मैं onClick वास्तविक <SensorItem /> टैग पर ईवेंट पंजीकृत नहीं कर सकता (मुझे यकीन नहीं है कि यह क्यों है)। मैं इसे अन्यथा प्राप्त करने के बारे में कैसे जा सकता हूं?

Answer 1

यह आपके सेंसरइटेम घटक की परिभाषा पर निर्भर करता है। क्योंकि सेंसरइटम देशी डीओएम तत्व नहीं है, लेकिन जैसा कि आपने कहा है, एक अन्य प्रतिक्रिया घटक, ऑनक्लिक पर परिभाषित किया गया है, बस उस घटक की एक संपत्ति है। आपको क्या करने की जरूरत है, है SensorItem घटक के अंदर onClick एक डोम घटक के onClick ईवेंट को सहारा पारित:

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