React.js नियंत्रित टेक्स्ट कर्सर फोकस समस्या

Question

मेरे पास नीचे की तरह प्रकार का एक सरल नियंत्रित इनपुट है।

<input type="number" value={+value} step={1} onChange={this.updateMyChange} /> 

मेरे value अक्सर 123.123 की तरह एक दशमलव संख्या दिखाता है। मेरी समस्या यह है कि, जब मैं मान संपादित करने का प्रयास करता हूं। जैसे ही दशमलव स्थान साफ़ हो जाते हैं, कर्सर पूरी संख्या को अनदेखा कर शुरुआत में फोकस और बदलाव को खो देता है। नीचे की तरह:

मैं यह कैसे को संबोधित करते हैं? दशमलव स्थानों को साफ़ करने के तुरंत बाद, कर्सर शुरुआत में कूदता है जिससे पूरे नंबर को संपादित करना असंभव हो जाता है। किसी भी सहायता की सराहना की जाएगी।

अद्यतन नीचे दिए गए उपयोगकर्ता द्वारा अनुरोधित शेष कोड नीचे दिया गया है।

render() { 
    const {value} = this.state; 

    return (
     <input type="number" value={+value} step={1} onChange={this.updateMyChange} /> 
    ) 
} 

और मेरे updateMyChange विधि बस

updateMyChange(e) { 
    this.setState({ value: e.target.value }); 
} 

यह कुछ भी नहीं है ज्यादा बस नया मान सेट करता है। जैसे ही दशमलव स्थान साफ़ हो जाते हैं, कर्सर की स्थिति समाप्त हो जाती है। यह कर्सर को पूरी संख्या के लिए सेट नहीं करता है।

Answer 1

यह कैसे अद्यतन एक इनपुट फ़ील्ड का मान प्रतिक्रिया है:

node.setAttribute(attributeName, '' + value); 

आपको लगता है कि विधि का उपयोग कर value विशेषता सेट करते हैं, कैरट परवाह किए बिना प्रतिक्रिया का उपयोग कर के, फ़ील्ड के शुरू करने के लिए चला जाता है। आप देख सकते हैं कि मैं इस पहेली में क्या कह रहा हूं - https://jsfiddle.net/5v896g3q/ (बस बदलाव के बीच क्षेत्र में कर्सर को आज़माएं और स्थिति दें)।

According to MDN, setAttributevalue से निपटने के दौरान अस्थिर है। value को बदलने का अनुशंसित तरीका तत्व की संपत्ति, element.value = newValue पर पहुंचकर है। यदि आप उस दृष्टिकोण का उपयोग करते हैं, तो सभी उम्मीद के अनुसार जाते हैं।

यह सब मैं निश्चित रूप से बता सकता हूं। अब चलो थोड़ा अनुमान लगाओ। आप उस क्षेत्र में कुछ भी लिखते हैं, तो आप कर रहे हैं:

1. इनपुट
2. का मूल्य अद्यतन करने कि मूल्य पढ़ने, और राज्य
3. प्रतिक्रिया के रूप में प्रतिक्रिया के लिए भेजने से इनपुट के मूल्य को अद्यतन करता है, नए के साथ राज्य

जब आप मैदान पर टाइप कर रहे हैं, चरण 3 का कोई प्रभाव नहीं होने की संभावना है, क्योंकि जब मूल्य वापस आता है, तो इनपुट पहले से ही सही हो गया है। फ्लोट नंबर के साथ मामले को छोड़कर। जब आपका फ़ील्ड 1. पढ़ता है, वास्तविक मान प्रतिक्रिया 1 के साथ फ़ील्ड को अपडेट करता है। और प्रतिक्रिया बुराई विधि का उपयोग करती है (setAttribute)।

तो, एक समाधान मैंने पाया, फ़ील्ड का मान की स्थापना की गई थी उचित विधि का उपयोग कर, से पहले अंतिम रूप यह प्रतिक्रिया, componentWillUpdate पर:

componentWillUpdate(nProps, nState){ 
    this.refs.input.value = '0' + nState.value 
} 

समस्या, है कि यह "numerizing" है प्रत्येक परिवर्तन पर मूल्य, जिसका अर्थ है कि मैं एक बिंदु (1.) नहीं कर पाऊंगा।

componentWillUpdate(nProps, nState){ 
    if(this.state.value.length - nState.value.length === 2){ 
    this.refs.input.value = '0' + nState.value 
    } 
} 

कार्य उदाहरण - https://jsfiddle.net/bsoku268/3/

टिप्पणी: इसी कारण से, मैं केवल इनपुट मामले में नया मान वर्ष की तुलना में 2 वर्ण कम है (बिंदु + अंकों बिंदु के बाद) संपादित करेंगे निष्पादन उद्देश्यों के लिए है, और बुलेटप्रूफ समाधान नहीं माना जाता है, क्योंकि & पेस्ट की प्रतिलिपि बनाने के कई तरीके हैं, जैसे & ड्रॉप, ऑटोफिल, आदि