प्रतिक्रिया - बच्चे से माता-पिता पर ईवेंट ट्रिगर को रोकें

Question

मेरे पास यह परिदृश्य है, जहां जब मूल तत्व क्लिक किया जाता है, तो यह विभिन्न रंगों के साथ एक बच्चे तत्व दिखाने के लिए फ़्लिप करता है। दुर्भाग्यवश, जब उपयोगकर्ता रंगों में से किसी एक पर क्लिक करता है, तो माता-पिता पर 'क्लिक' ईवेंट भी ट्रिगर होता है।

जब बच्चे को क्लिक किया जाता है तो मैं पेरेंट पर ईवेंट ट्रिगर को कैसे रोक सकता हूं?

संभावित समाधान मैं सोच रहा हूँ:

1 - सीएसएस? बच्चे को क्लिक होने पर माता-पिता को pointer-events : none कक्षा संलग्न करें। हालांकि, इसका मतलब यह होगा कि माता-पिता को बाद में pointer-events कक्षा से साफ़ करने की आवश्यकता होगी।

2 - रेफरी का उपयोग कर? बच्चे पर क्लिक करने के बाद तत्व & पर ref रिकॉर्ड करें event.target रेफरी के विरुद्ध तुलना करें? मुझे यह पसंद नहीं है क्योंकि मुझे वैश्विक ref पसंद नहीं है।

विचार & बेहतर समाधान की सराहना की जाएगी। सवाल यह है: जब बच्चे को क्लिक किया जाता है तो मैं पेरेंट पर ईवेंट ट्रिगर को कैसे रोक सकता हूं?

Answer 1

आप उपयोग कर सकते हैं stopPropagation

stopPropagation - उत्साह से भरा हुआ चरण में वर्तमान घटना के आगे प्रसार को रोकता है

var App = React.createClass({ 
 
    handleParentClick: function (e) { 
 
    console.log('parent'); 
 
    }, 
 

 
    handleChildClick: function (e) { 
 
    e.stopPropagation(); 
 
    console.log('child'); 
 
    }, 
 

 
    render: function() { 
 
    return <div> 
 
     <p onClick={this.handleParentClick}> 
 
     <span onClick={this.handleChildClick}>Click</span> 
 
     </p> 
 
    </div>; 
 
    } 
 
}); 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>