1. घर
  2. सवाल और जवाब
  3. प्रतिक्रिया + अर्थात्-यूआई: यूआई मोडल

प्रतिक्रिया + अर्थात्-यूआई: यूआई मोडल

2015-10-20 9 views
6

के अंदर फॉर्म का उपयोग करना सादे पुराने अर्थात् यूआई में प्रतिक्रिया के बिना, मैं बिना किसी समस्या के मॉडल के अंदर एक फॉर्म डाल सकता हूं।प्रतिक्रिया + अर्थात्-यूआई: यूआई मोडल

सेमेन्टिक-यूआई + प्रतिक्रिया संस्करण के साथ, मैं मोडल के अंदर फॉर्म प्रदर्शित करने में सक्षम हूं, लेकिन यह जिस तरह से मैं अपेक्षा करता हूं वह काम नहीं करता है।

उदाहरण के लिए, मोडल शो के बाद और मोडल के अंदर फॉर्म भी प्रदर्शित होता है। अगर मैं इनपुट क्षेत्र में inputting शुरू, मैं इस त्रुटि प्रदर्शित मिलेगा:

Error: Invariant Violation: findComponentRoot(..., .1.1.1.0.4.0.0.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

और इस त्रुटि के कारण, अन्य कोड है कि मैं इनपुट का उपयोग प्रतिक्रिया अपेक्षा के अनुरूप काम नहीं करते के लिए।

यह है कि समस्या को दर्शाता है कोड का सबसे सरल संस्करण है:

$('.ui.modal.editform').modal('show');

के रूप में: मैं कहाँ घटक मैं इसे गति प्रदान करने के लिए सुनिश्चित किया जाता ऊपर जोड़ने

ConfirmEdit = React.createClass({ 

    render(){ 
     return (
      <div className="ui modal editform"> 
       <form className="ui form"> 
        <div className="field"> 
         <label>Name</label> 
         <input name="name" type="text" placeholder="Name"> 
         </input> 
        </div> 
       </form> 
      </div> 
     ); 
    } 
});

घटक के अंदर उपर्युक्त। यह ठीक दिखाता है, लेकिन यह Invariant उल्लंघन के कारण ठीक काम नहीं करता है।

मैं इसके आसपास कैसे काम करता हूं और इसे काम करता हूं?

स्रोत

2015-10-20 preston

उत्तर

10

आप विकल्प को अलग करने योग्य = झूठी विकल्प के साथ componentDidMount में मोडल प्रारंभ करना चाहते हैं।

$('.ui.modal').modal({detachable: false});

इस मोडल पाएगा एक वैश्विक मद्धम ऑब्जेक्ट के अंदर ले जाया जा रहा है, और डोम अभी भी स्वामित्व हो जाएगा और कामयाब प्रतिक्रिया से। अन्य विकल्प दस्तावेज here हैं।

मैंने परीक्षण के लिए JSFiddle उदाहरण बनाया है।

स्रोत

2015-10-20 18:19:53 J3Y

+0

हाय @ J3Y अपने समाधान बहुत आसान एचटीएमएल संरचना के साथ JSFiddle पर काम करता है। मेरी परियोजना की तुलना में थोड़ा अधिक जटिल संरचना है। मैंने एक JSFiddle बनाया है जो मेरी समस्या का प्रदर्शन करता है। सफारी पर मॉडल मंदर के नीचे छिप जाता है। FIREFOX पर JSFiddle काम करता है ... लेकिन वास्तव में ब्राउज़र पर FIREFOX में अपना वास्तविक प्रोजेक्ट खोलने पर, मोडल अभी भी मंदर के नीचे छिप जाता है। यह जेएसएफडल को चित्रित करने के लिए है: https://jsfiddle.net/va1zhu4w/3/ अलग करने योग्य: झूठी आविष्कार उल्लंघन त्रुटि से छुटकारा पाता है लेकिन कुछ साइड इफेक्ट्स के साथ पहेली में दिखाया गया है। कैसे हल करें? – preston

+0

jsfiddle.net/va1zhu4w/3 में मैंने डिवी कंटेनर के आस-पास जोड़ा है, और मैंने सेमिनेंट-यूआई के यूआई साइडबार के अंदर ConfirmEdit मॉडल को लपेट लिया है ... मैंने बस एक सीएसएस मार्जिन-टॉप जोड़ा निश्चित मेनू के नीचे छुपाया नहीं जाएगा ..... बस सोचा कि मैं इसे आसान बनाने के लिए इनका उल्लेख करूँगा .... धन्यवाद – preston

+0

अच्छा, मेरा जवाब अधिकतर काम कर रहा था? – J3Y

1

ठीक है ... काश मैं के बारे में सोचा था कि पहले ....

मैं डोम विश्लेषण करने के लिए और सीधे समाधान के लिए डोम में हेरफेर का फैसला किया है इस।

मैंने अन्य 'सुंदर' कम हैक-वाई समाधान की तलाश करने की कोशिश की थी लेकिन चीजें बस काम नहीं कर रही थीं। मैंने सेमेन्टिक-यूआई फॉर्मों के साथ एकीकृत करने के लिए सामग्री-यूआई के मोडल को आजमाया लेकिन पाया कि यह मॉड्यूल की सामग्री लंबे समय तक फॉर्म आदि की तरह लंबे समय तक स्क्रॉल नहीं करता है ......

मैंने भी भरोसा करने की कोशिश की थी अर्थपूर्ण-यूआई की एपीआई (उपलब्ध सेटिंग्स इत्यादि) लेकिन उनके पास सभी प्रकार के नकारात्मक साइड इफेक्ट्स हैं।

तो यहां मैंने समाधान खोजने के लिए क्या किया है। मैंने मॉड्यूल को प्रदर्शित करते समय HTML को देखा और डोम में अपनी स्थिति को देखा।

यह पता चला है के रूप में, जब एक मद्धम सक्रिय है, अर्थ-यूआई मैंने पाया यह एक भाई और नहीं के साथ एक और div का एक बच्चा होने की div मद्धम

ui dimmer modals page transition visible active

के लिए इस वर्ग के साथ एक div प्रदर्शित करता है

ui fluid container pushable

जिसमें मेरी सभी अन्य सामग्री शामिल है।

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

showModal: function() { 
    $('.ui.modal.editform').modal('show'); 
    //$('.ui.dimmer.modals').dimmer('hide'); 
    //$('.ui.dimmer.modals').after('.pusher'); 
    // $('.ui.dimmer.modals').appendTo('#render-target'); 
    $('.ui.dimmer.modals').appendTo('.ui.fluid.container.pushable'); 
}

संक्षेप में: 1.) सिमेंटिक-UI का उपयोग एक मॉडल के अंदर एक रूप को प्रदर्शित करने में मेरे अनुभव के साथ प्रतिक्रिया के साथ है, अगर आप अर्थ-यूआई के यूआई मोडल की अलग गुण सेट नहीं है यह, Invariant उल्लंघन आदि के साथ त्रुटियां समाधान अलग करने के लिए अलग करने के लिए सेट है।

2.) इसके बाद, आपको मोडल और फॉर्म को कवर करने वाले मोडल के मंदर की समस्या का सामना करना पड़ सकता है और इसलिए यह न केवल खराब दिखता है, आप इनपुट फ़ील्ड इत्यादि में भी क्लिक नहीं कर सकते हैं ... इसके लिए समाधान, कम से कम मेरे मामले में, jQuery के साथ डोम में हेरफेर करना था और जो कुछ भी अर्थपूर्ण-यूआई स्वचालित रूप से करने के लिए भूल गया था उसे ठीक करना था।

मुझे आशा है कि मदद करता है भविष्य में किसी .... 3 दिन अभी के लिए इस पर अटक गया है ....

अगर यह सबसे अच्छा समाधान है मैं नहीं जानता .... लेकिन यह काम किया .... मुझे बताएं कि आपके पास कोई बेहतर समाधान है ......

स्रोत

2015-10-21 08:47:45 preston

1

ठीक है ... मुझे एक बेहतर जवाब मिला।

ऊपर दिया गया पहला जवाब आयाम को उसी माता-पिता के रूप में ले जाना था जब वह मोडल किसी भी कंटेनर में हो सकता है जो पदानुक्रम में कम है।

ऐसा करके, मोडल में मोडल और फॉर्म अब dimmer द्वारा कवर नहीं किया जाता है।

अब समस्या (मेरे मामले में कम से कम) यह था कि मंदर केवल खिड़की के एक निश्चित भाग को कवर कर रहा था, न कि पूरी खिड़की जो इसे करना चाहिए। इस मामले में, इससे कोई फर्क नहीं पड़ता कि आपने सीएसएस ऊंचाई को 100% पर सेट करने का प्रयास किया है ... क्योंकि यह शायद पहले से ही 100% है लेकिन मूल कंटेनर केवल उस बिंदु तक जाता है और इसलिए dimmer भी जाता है।

तो यह मुझे मिला है कि यह बेहतर समाधान है।

मुझे पता चला है कि यदि आप पदानुक्रम में मोडल उच्च घोषित करते हैं, तो मेरे मामले में मैंने इसे लक्षित कंटेनर से पहले शीर्ष कंटेनर पर घोषित किया।

इस लक्ष्य कंटेनर है:

<div id="render-target"></div>

और यह है कि कंटेनर के लिए प्रस्तुत करना करने के लिए प्रतिक्रिया बताने के लिए है:

React.render(<App />, document.getElementById("render-target"));

सर्वोच्च div कंटेनर के अंदर है, जहां मैं साथ यूआई मोडल घोषित detachable:false सेटिंग ...

अब जब मैं प्रदर्शित करने के लिए यूआई मोडल ट्रिगर करता हूं, तो मैं मोडल को एक उच्च डिवी कंटेनर में ले जाने के लिए jQuery का उपयोग करता हूं, जो इस मामले में टी नहीं है वह कंटेनर को लक्ष्य:

$('.ui.modal.editform').appendTo('#render-target');

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

स्रोत

2015-10-21 11:25:35 preston

-2

मोडल सेटिंग्स में context का उपयोग करें। यह मेरे लिए काम किया।

स्रोत

2015-11-26 17:41:10 netstyler

0

अलग करने योग्य सेट करें: मेरे अनुभव में झूठा एक अच्छा विचार नहीं है, क्योंकि मोडल ('शो') आमतौर पर आपके पृष्ठ में एक हिमर भी बनाते हैं, यह जेड-इंडेक्स समस्या का सामना करेगा।

मैं इस समस्या को हल करने के लिए एक प्रतिक्रिया-semanticui-modal घटक बनाते हैं, this का उपयोग करें, आप अपने प्रतिक्रिया प्रोजेक्ट में स्वतंत्र रूप से अर्थपूर्ण मोडल का उपयोग करते हैं।

स्रोत

2016-10-26 01:20:35

संबंधित मुद्दे

 संबंधित मुद्दे