React.js में बबलिंग और कैप्चरिंग के लिए उदाहरण

Question

मैं React.js में बबलिंग और कैप्चरिंग को संभालने में एक उदाहरण ढूंढ रहा हूं। मुझे one with JavaScript मिला, लेकिन मुझे React.js के बराबर खोजने में परेशानी हो रही है।

मुझे React.js में बबलिंग और कैप्चरिंग के लिए एक उदाहरण कैसे बनाना होगा?

Answer 1

बुदबुदाती और कैप्चरिंग दोनों के रूप में डोम कल्पना वर्णन करते हैं, के लिए कि कैसे आप संचालकों संलग्न के बारे में जाना छोड़कर उसी तरह से प्रतिक्रिया द्वारा समर्थित हैं।

बबलिंग सामान्य डीओएम एपीआई के साथ सरल है; बस एक तत्व की एक अंतिम माता-पिता के लिए कोई हैंडलर देते हैं, और किसी भी घटनाओं उस तत्व पर शुरू हो रहा होगा माता-पिता के लिए बुलबुला जब तक यह रास्ता साथ stopPropagation के माध्यम से नहीं रोका है:

<div onClick={this.handleClick}> 
    <button>Click me, and my parent's `onClick` will fire!</button> 
</div> 

कैप्चर बस के रूप में सरल है, हालांकि है यह mentioned only briefly in the docs है। सीधे शब्दों में ईवेंट हैंडलर संपत्ति नाम को Capture जोड़ें:

<div onClickCapture={this.handleClickViaCapturing}> 
    <button onClick={this.handleClick}> 
    Click me, and my parent's `onClickCapture` will fire *first*! 
    </button> 
</div> 

इस मामले में, handleClickViaCapturing अगर कॉल stopPropagation घटना पर, बटन के onClick हैंडलर बुलाया नहीं किया जाएगा।

This JSBin का प्रदर्शन करना चाहिए, कैसे कब्जा बुदबुदाती, और में stopPropagation काम करता है प्रतिक्रिया: https://jsbin.com/hilome/edit?js,output