प्रतिक्रिया: बाहरी ऑन चेंज इवेंट

Question

प्रतिक्रिया में बाहरी पाठ परिवर्तन घटनाओं को कैसे पढ़ा जाए।

Grammarly और Auto Text Expander जैसे एक्सटेंशन टेक्स्टरेरा के अंदर टेक्स्ट अपडेट करते हैं, लेकिन परिवर्तन के बाद चेंज या ऑन इनपुट ईवेंट को कोई प्रतिक्रिया नहीं दी जाती है। नतीजतन, राज्य अद्यतन नहीं होता है और स्थिति असंगत है (टेक्स्टरेरा और घटक के राज्य में अलग-अलग मान)। एक तरीका सबमिट पर डोम वैल्यू को पढ़ना है, लेकिन यह मेरे परिदृश्य के लिए सही समाधान नहीं है, क्योंकि कुछ अन्य क्रियाएं टेक्स्टरेरा के वर्तमान मूल्य पर निर्भर करती हैं। कोई अच्छा समाधान?

पीएस: मैं एक सामान्य समाधान मांग रहा हूं। एक्सटेंशन कोड बदलना एक विकल्प नहीं है।

Answer 1

जब आप एक jQuery इनपुट प्लगइन का उपयोग करते हैं तो आपको इस तरह की समस्या हो सकती है और प्लगइन .prop विधि के बजाय .attr विधि का उपयोग करता है, जो ऑन चेंज ईवेंट को ट्रिगर करता है। इस मामले में, आपको प्लगइन द्वारा प्रदान किए गए कॉलबैक हैंडलर पर भरोसा करना होगा।

आपके मामले में ऐसा लगता है कि ऐसा कॉलबैक हैंडलर है। (कोड उपलब्ध होने पर यह जांचने में कभी दर्द नहीं होता है।) फिर, एकमात्र विकल्प मतदान होता है, जो बदसूरत लेकिन अपरिहार्य है।

Answer 2

आप componentDidMount के अंदर सभी या एक विशिष्ट टेक्स्टरेरा के ईवेंट श्रोता को जोड़ सकते हैं (कार्यान्वयन के लिए स्निपेट देखें)। यह प्रतिक्रिया के अंदर राज्य अद्यतन करेगा। स्निपेट को टिप्पणी के साथ अच्छी तरह से संबोधित किया गया है। यह आपकी मदद करनी चाहिए!

class KeyTrace extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.setValueToState = this.setValueToState.bind(this) 
 
    this.state = {} //initial state 
 
    } 
 
    setValueToState(e) { 
 
    this.setState({ 
 
    [e.target.id]: e.target.value //set the new value in the state as {[id]: [value]} pair 
 
    }) 
 
    } 
 
    componentDidMount() { 
 
    const textareas = document.querySelectorAll('textarea') //finds all textarea in the DOM 
 
    const textareasArray = [...textareas] //convert the HTML Collection into array 
 
    textareasArray.forEach((el) => { //loop through the array 
 
     if (el.id === 'update') //add onchange listener for specific textareas (optional) 
 
     el.onchange = this.setValueToState //add a event listener 
 
    }) 
 

 
    } 
 
    render(){ 
 
    console.log(this.state) 
 
    return false 
 
    } 
 
} 
 

 
ReactDOM.render(<KeyTrace/>, document.getElementById('react'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="non-react"> 
 
    Changes will be stored in react state 
 
    <br/> 
 
    <textarea id="update"></textarea> 
 
    <br/>Changes will not be stored in react state 
 
    <br/> 
 
    <textarea id="wont-update"></textarea> 
 
    <br/> 
 
</div> 
 
<div id="react"></div>

पी एस। onchange ईवेंट को आग लगाने के लिए आपको blur (टेक्स्टरेरा के बाहर क्लिक करें) टेक्स्टरेरा की आवश्यकता है। अन्यथा, आप onchange के बजाय onkeypress का उपयोग कर सकते हैं।

Answer 3

हालांकि इस तरह के परिदृश्य के साथ दिमाग में लिखा नहीं गया है, शायद https://github.com/erikras/react-native-listener आपको जो चाहिए वो हासिल करने में आपकी मदद कर सकते हैं ?!