मैं एक प्रतिक्रिया घटक के भीतर से बॉडी में क्लिक हैंडलर कैसे जोड़ सकता हूं?

Question

मैं पुलडाउन मेनू का निर्माण कर रहा हूं प्रतिक्रिया घटक जो उपयोगकर्ता को के बाहर DOM में कहीं भी क्लिक करता है।

jQuery का उपयोग करके मैं आमतौर पर पुलडाउन बंद होने पर body पर एक ईवेंट श्रोता जोड़ता हूं, और पुलडाउन बंद होने पर इसे फिर से हटा देता हूं। (घटना श्रोता ही अधोगामी बंद कर देता है -। किसी भी क्लिक घटनाओं घटक भीतर शुरू होने से ही शरीर क्लिक हैंडलर को रोकने के लिए प्रचारित नहीं कर रहे हैं)

वहाँ एक प्रतिक्रिया के भीतर से body तत्व को एक श्रोता संलग्न करने के लिए कोई तरीका है घटक? या मुझे बस jQuery का उपयोग करना चाहिए? (मैं प्रतिक्रिया और jQuery मिश्रण करने से थोड़ा सावधान हूं।)

Answer 1

प्रतिक्रिया सिर्फ जावास्क्रिप्ट है इसलिए किसी भी तत्व को क्लिक हैंडलर को जोड़ने से addEventListener() का उपयोग करके सामान्य के रूप में सामान्य किया जाता है। componentDidMount में ऐसा करना आमतौर पर जोड़ा गया ईवेंट हैंडलर हटाकर componentWillUnmount में अपने आप के बाद बहुत अच्छा और साफ और साफ हो जाता है।

var Component = React.createClass({ 
    componentDidMount: function() { 
     document.body.addEventListener('click', this.myHandler); 
    }, 
    componentWillUnmount: function() { 
     document.body.removeEventListener('click', this.myHandler); 
    }, 
    myHandler: function() { 
     alert('click'); 
    }, 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
});