प्रतिक्रिया: घटना नेस्ट घटकों के माध्यम से बुदबुदाती

Question

चलो कहते हैं कि मैं इस तरह के घटकों नेस्ट है दो:

//on root component 
this.action = function(id){} 

मैं करने की आवश्यकता है:

<root /> 
    <comp1 /> 
    <comp2 /> 
     <target id={this.props.id}> 
     <div>click me</div> 

मैं जड़ पर एक समारोह को चलाने के लक्ष्य पर क्लिक बनाना चाहते मैन्युअल रूप से श्रृंखला में प्रत्येक घटक पर एक संपत्ति सेट करें, जैसे प्रतिक्रिया ट्यूटोरियल उदाहरण में? Jsfiddle

<root /> 
    <comp1 clickHandler={this.action}/> 
    <comp2 clickHandler={this.clickHandler}/> 
     <target id={this.props.id} clickHandler={this.clickHandler} /> 
     <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div> 

या कोई बुलबुला करने के लिए सामान्य डोम में इस तरह की घटनाओं ऊपर किसी तरह है?

Answer 1

आप बच्चे घटकों के माध्यम से रंगमंच की सामग्री पारित करने के लिए आशुलिपि का उपयोग कर सकते

<Component {...this.props} more="values" /> 

Transferring props

अपने मामले में

तो:

<root /> 
    <comp1 clickHandler={this.action}/> 
    <comp2 {...this.props} /> 
     <target {...this.props} id={this.props.id} /> 
     <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div> 

Answer 2

प्रतिक्रिया के पार दोनों में वर्चुअल डोम है सिंथेटिक घटनाक्रम का समर्थन करता है कैप्चरिंग और बबलिंग चरण (जैसा कि यहां बताया गया है: https://facebook.github.io/react/docs/events.html)।

इसका मतलब है कि आप रूट के पास किसी भी डोम तत्व पर एक onclick हैंडलर डाल सकता है और यह पृष्ठ पर सभी क्लिक करें घटनाओं के लिए उत्प्रेरित करने चाहिए: के बाद से यह सभी क्लिक के लिए सक्रिय कर देगा,

<root> 
    <div onClick={this.handleAllClickEvents}> 
    <comp1> 
     <comp2> 
     <target> 
      <div id={this.props.id}>click me</div> 

हालांकि घटनाओं, आपको क्लिक हैंडलर में उनके बीच असंबद्ध होना होगा (जो कुछ सुंदर बदसूरत कोड के लिए बनाता है)।

function handleAllClickEvents(event) { 
    var target = event.relatedTarget; 
    var targetId = target.id; 
    switch(targetId) { 
    case 'myBtn1': 
     // handle myBtn1 click event 
    case 'myBtn2': 
     // handle myBtn2 click event 
    } 
} 

घटना प्रतिनिधिमंडल की यह शैली क्या प्रतिक्रिया हुड (https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation) के तहत करता है ताकि आप अपने आप से पूछना करने के लिए है कि अगर आप वास्तव में क्या करना चाहते हैं वास्तव में है।

वैकल्पिक रूप से आप फ्लक्स में डिस्पैचर पैटर्न (https://facebook.github.io/flux/docs/actions-and-the-dispatcher.html#content) जैसे कुछ देखना चाहते हैं। यह जाने के लिए थोड़ा और जटिल है लेकिन यह समग्र रूप से एक बेहतर समाधान है।