प्रतिक्रिया.जेएस कैसे करें zurb के साथ अच्छा खेलें मोडल फॉर्म

Question

प्रकट करें मैं ज़बर को एकीकृत घटक में फ़ॉर्म के साथ प्रकट करने की कोशिश कर रहा हूं। अब तक अगले कोड को ठीक से मोडल प्रपत्र प्रदर्शित करता है:

ModalForm = React.createClass({ 
    handleSubmit: function(attrs) { 
    this.props.onSubmit(attrs); 
    return false; 
    }, 

    render: function(){ 
    return(
     <div> 
     <a href="#" data-reveal-id="formModal" className="button">Add new</a> 
     <div id="formModal" className="reveal-modal" data-reveal> 
      <h4>Add something new</h4> 
      <Form onSubmit={this.handleSubmit} /> 
      <a className="close-reveal-modal">&#215;</a> 
     </div> 
     </div> 
    ); 
    } 
}); 

Form घटक सुंदर मानक है:

Form = React.createClass({ 
    handleSubmit: function() { 
    var body = this.refs.body.getDOMNode().value.trim(); 
    if (!body) { 
     return false; 
    } 
    this.props.onSubmit({body: body}); 
    this.refs.body.getDOMNode().value = ''; 
    return false; 
    }, 
    render: function(){ 
    return(
     <form onSubmit={this.handleSubmit}> 
     <textarea name="body" placeholder="Say something..." ref="body" /> 
     <input type="submit" value="Send" className="button" /> 
     </form> 
    ); 
    } 
}); 

समस्या: जब मैं मोडल प्रपत्र घटक के भीतर प्रपत्र घटक प्रस्तुत करना और उसके बाद प्रपत्र इनपुट में कुछ दर्ज मैं कंसोल अपवाद Uncaught object में देखता हूं। यह एक ढेर है:

Uncaught object 
    invariant 
    ReactMount.findComponentRoot 
    ReactMount.findReactNodeByID 
    getNode 
    ... 

यदि मैं केवल मूल घटक में फॉर्म घटक प्रस्तुत करता हूं तो सब कुछ काम करता है। क्या कोई मदद कर सकता है?

Answer 1

संक्षेप में, आप यह गलत कर रहे हैं और यह प्रतिक्रिया में एक बग नहीं है।

यदि आप किसी भी प्रकार की प्लगइन का उपयोग करते हैं जो प्रतिक्रिया घटक के डोम नोड्स को संशोधित करता है तो यह चीजों को एक या दूसरे तरीके से तोड़ने जा रहा है।

इसके बजाय आपको क्या करना चाहिए, इसके बजाय आप अपने मोडल संवाद के लिए घटक को स्थिति में रखने के लिए प्रतिक्रिया स्वयं और पूरक सीएसएस का उपयोग कर रहे हैं।

मैं एक घटक बनाने का सुझाव दूंगा जो प्रतिक्रिया के statics घटक प्रॉपर्टी का उपयोग करता है ताकि renderComponent को दोहराए गए कार्यों को परिभाषित किया जा सके ताकि आपको एक प्रतिक्रिया संवाद दिखाने या छिपाने के लिए एक अच्छा साफ फ़ंक्शन कॉल दिया जा सके। अतीत में मैंने जो कुछ उपयोग किया है उसका एक कट डाउन उदाहरण यहां दिया गया है। एनबी: यह jQuery का उपयोग करता है लेकिन यदि आप jQuery कोड नहीं चाहते हैं तो आप elementById आदि जैसे मानक जेएस एपीआई कॉल के साथ जेक्यू को प्रतिस्थापित कर सकते हैं।

window.MyDialog = React.createClass({ 
    propTypes: { 
     title:  React.PropTypes.string.isRequired, 
     content: React.PropTypes.string.isRequired 
    }, 
    statics: { 

     // open a dialog with props object as props 
     open: function(props) { 
      var $anchor = $('#dialog-anchor'); 
      if (!$anchor.length) { 
       $anchor = $('<div></div>') 
        .prop('id', 'dialog-anchor'); 
        .appendTo('body'); 
      } 
      return React.renderComponent(
       MyDialog(props), 
       $anchor.get(0) 
      ); 
     }, 

     // close a dialog 
     close: function() { 
      React.unmountComponentAtNode($('#dialog-anchor').get(0)); 
     } 
    }, 

    // when dialog opens, add a keyup event handler to body 
    componentDidMount: function() { 
     $('body').on('keyup.myDialog', this.globalKeyupHandler); 
    }, 

    // when dialog closes, clean up the bound keyup event handler on body 
    componentWillUnmount: function() { 
     $('body').off('keyup.myDialog'); 
    }, 

    // handles keyup events on body 
    globalKeyupHandler: function(e) { 
     if (e.keyCode == 27) { // ESC key 

      // close the dialog 
      this.statics.close(); 
     } 
    }, 

    // Extremely basic dialog dom layout - use your own 
    render: function() { 
     <div className="dialog"> 
      <div className="title-bar"> 
       <div className="title">{this.props.title}</div> 
        <a href="#" className="close" onClick={this.closeHandler}> 
       </div> 
      </div> 
      <div className="content"> 
       {this.props.content} 
      </div> 
     </div> 
    } 
}); 

फिर आप को फोन करके एक संवाद खोलने:

MyDialog.open({title: 'Dialog Title', content: 'My dialog content'});

और

MyDialog.close()

संवाद हमेशा के साथ सीधे शरीर के तहत एक नया डोम नोड के लिए देता के साथ इसे बंद आईडी 'संवाद-एंकर'। यदि कोई पहले से खुला होने पर एक संवाद खोलता है, तो यह केवल नए प्रोप (या यदि वे समान नहीं हैं) के आधार पर डोम को अपडेट करेगा।

एक प्रोप तर्क के रूप में संवाद की सामग्री को पारित करने के लिए विशेष रूप से उपयोगी नहीं है। मैं आमतौर पर सामग्री के लिए पार्स मार्कडाउन -> एचटीएमएल के लिए नीचे या एक यूपीएल को प्रोप के रूप में आपूर्ति करते समय घटक के अंदर AJAX अनुरोध के माध्यम से कुछ एचटीएमएल प्राप्त करता हूं।

मुझे पता है कि उपरोक्त कोड बिल्कुल वही नहीं है जो आप खोज रहे थे लेकिन मुझे नहीं लगता कि प्रतिक्रिया के साथ एक डोम-संशोधित प्लगइन कार्य करने का एक अच्छा तरीका है। आप कभी भी यह नहीं मान सकते कि प्रतिक्रिया घटक का डोम प्रतिनिधित्व स्थिर है और इसलिए इसे किसी तृतीय पक्ष प्लगइन द्वारा सफलतापूर्वक छेड़छाड़ नहीं किया जा सकता है। मैं ईमानदारी से सोचता हूं कि क्या आप इस तरह से प्रतिक्रिया का उपयोग करना चाहते हैं, आपको फिर से मूल्यांकन करना चाहिए कि आप ढांचे का उपयोग क्यों कर रहे हैं।

उसने कहा, मुझे लगता है कि ऊपर दिया गया कोड एक संवाद के लिए एक महान प्रारंभिक बिंदु है जिसमें सभी मैनिपुलेशन घटक के अंदर होता है, जो बाद में प्रतिक्रियाओं के बारे में क्या है!

एनबी: कोड स्मृति से बहुत जल्दी लिखा गया था और वास्तव में इसके वर्तमान रूप में परीक्षण नहीं किया गया था, इसलिए क्षमा करें अगर कुछ मामूली वाक्यविन्यास त्रुटियां या कुछ हैं।

Answer 2

यहाँ कैसे क्या माइक किया ऐसा करने के लिए, लेकिन एक जेडएफ मोडल प्रकट उपयोग कर रहा है:

var Dialog = React.createClass({ 
    statics: { 
    open: function(){ 
     this.$dialog = $('#my-dialog'); 

     if (!this.$dialog.length) { 
     this.$dialog = $('<div id="my-dialog" class="reveal-modal" data-reveal role="dialog"></div>') 
      .appendTo('body'); 
     } 

     this.$dialog.foundation('reveal', 'open'); 

     return React.render(
     <Dialog close={this.close.bind(this)}/>, 
     this.$dialog[0] 
    ); 
    }, 
    close: function(){ 
     if(!this.$dialog || !this.$dialog.length) { 
     return; 
     } 

     React.unmountComponentAtNode(this.$dialog[0]); 
     this.$dialog.foundation('reveal', 'close'); 
    }, 
    }, 
    render : function() { 
    return (
     <div> 
     <h1>This gets rendered into the modal</h1> 
     <a href="#" className="button" onClick={this.props.close}>Close</a> 
     </div> 
    ); 
    } 
});