प्रतिक्रिया में, onChange और onInput में क्या अंतर है?

Question 1

मैंने इसके उत्तर के लिए चारों ओर खोज करने की कोशिश की है, लेकिन उनमें से अधिकांश रिएक्ट के संदर्भ से बाहर हैं, जहां onChangeधुंधला हो जाता है।

विभिन्न परीक्षणों के प्रदर्शन में, मैं यह नहीं बता सकता कि ये दोनों घटनाएँ अलग-अलग हैं (जब एक textarea पर लागू किया जाता है)। क्या कोई इस पर रोशनी डाल सकता है?

Question 2

ऐसा लगता है कि कोई वास्तविक अंतर नहीं है

प्रतिक्रिया, किसी कारण से, Component.onChangeDOM element.oninputइवेंट के लिए श्रोताओं को संलग्न करता है । प्रपत्रों पर दस्तावेज़ में नोट देखें:

प्रतिक्रिया डॉक्स - फ़ॉर्म

ऐसे और भी लोग हैं जो इस व्यवहार से हैरान हैं। अधिक जानकारी के लिए, इस मुद्दे पर प्रतिक्रिया समस्या ट्रैकर पर देखें:

दस्तावेज़ कैसे रिएक्ट के onChange onInput # 3964 से संबंधित है

उस मुद्दे पर टिप्पणियों से उद्धरण:

मुझे समझ में नहीं आता है कि रिएक्ट ने ऑनचेंज जैसा व्यवहार क्यों चुना है। जैसा कि मैं बता सकता हूं, हमारे पास पुराने ऑनचेंज व्यवहार को वापस लाने का कोई तरीका नहीं है। डॉक्स का दावा है कि यह एक "मिथ्या नाम" है, लेकिन वास्तव में ऐसा नहीं है, यह तब होता है जब कोई बदलाव होता है, तब तक नहीं जब तक कि इनपुट भी ध्यान केंद्रित नहीं करता।

सत्यापन के लिए, कभी-कभी हम सत्यापन त्रुटियों को तब तक नहीं दिखाना चाहते जब तक कि वे टाइपिंग न कर लें। या हो सकता है कि हम हर कीस्ट्रोक पर फिर से रेंडर न करें। अब ऐसा करने का एकमात्र तरीका onBlur है लेकिन अब हमें यह भी जांचना होगा कि मान मैन्युअल रूप से बदल गया है या नहीं।

यह बहुत बड़ी बात नहीं है, लेकिन मुझे ऐसा लगता है कि रिएक्ट ने एक उपयोगी घटना को दूर फेंक दिया और मानक व्यवहार से विचलित हो गया जब पहले से ही एक घटना थी जो ऐसा करती है।

मैं टिप्पणी के साथ 100% सहमत हूं ... लेकिन मुझे लगता है कि इसे बदलने से अब अधिक समस्याएं आएंगी क्योंकि यह बहुत कोड पहले से ही लिखा गया था जो इस व्यवहार पर निर्भर करता है।

प्रतिक्रिया आधिकारिक वेब एपीआई संग्रह का हिस्सा नहीं है

भले ही रिएक्ट जेएस के शीर्ष पर बनाया गया है, और एक विशाल गोद लेने की दर देखी गई है, क्योंकि एक प्रौद्योगिकी रिएक्ट अपने स्वयं के (काफी छोटे) एपीआई के तहत बहुत सारी कार्यक्षमता को छिपाने के लिए मौजूद है। एक बार ऐसा क्षेत्र जहां यह स्पष्ट है कि घटना प्रणाली में है, जहां सतह के नीचे बहुत कुछ चल रहा है जो वास्तव में मानक डोम इवेंट सिस्टम से मौलिक रूप से अलग है। न केवल उन घटनाओं के संदर्भ में, जो घटनाएँ करती हैं, बल्कि यह भी कि जब डेटा को ईवेंट हैंडलिंग के किस चरण में जारी रखने की अनुमति है। आप यहाँ उसके बारे में और अधिक पढ़ सकते हैं:

रिएक्ट इवेंट सिस्टम

Question 3

इसमें कोई फर्क नही है

प्रतिक्रिया में डिफ़ॉल्ट 'onChange' ईवेंट का व्यवहार नहीं है। 'OnChange' जिसे हम प्रतिक्रिया में देखते हैं, डिफ़ॉल्ट 'onInput' ईवेंट का व्यवहार है। इसलिए आपके प्रश्न का उत्तर देने के लिए प्रतिक्रिया में दोनों में कोई अंतर नहीं है। मैंने उसी के बारे में GitHub पर एक मुद्दा उठाया है और यही उनके बारे में कहना है:

मुझे लगता है कि उस समय यह निर्णय किया गया था (~ 4 साल पहले?), OnInput ब्राउज़र के बीच लगातार काम नहीं करता था, और अन्य प्लेटफार्मों से वेब पर आने वाले लोगों को भ्रमित कर रहा था, क्योंकि वे "परिवर्तन" घटना की उम्मीद करेंगे हर बदलाव पर आग। रिएक्ट के मामले में यह एक बड़ा मुद्दा है क्योंकि यदि आप जल्द ही बदलाव को संभालने में विफल रहते हैं, तो नियंत्रित इनपुट कभी भी अपडेट नहीं होते हैं, जिससे लोगों को लगता है कि रिएक्ट टूट गया है। इसलिए टीम इसे ऑनचेंज कहकर चली गई।

रेट्रोस्पेक्ट में यह एक बेहतर विचार हो सकता है कि किसी अन्य घटना के व्यवहार को बदलने के बजाय उसका नाम पॉलीफ़िल करना और उसका नाम रखना। लेकिन वह जहाज बहुत पहले ही रवाना हो चुका है। हम भविष्य में इस निर्णय पर फिर से विचार कर सकते हैं, लेकिन मैं आपको रिएक्ट डोम के एक क्विक के रूप में व्यवहार करने के लिए प्रोत्साहित करूंगा (जिसे आप बहुत जल्दी उपयोग कर लेंगे)।

https://github.com/facebook/react/issues/9567

साथ ही यह लेख अधिक अंतर्दृष्टि प्रदान करेगा। डिफ़ॉल्ट 'onChange' गायब होने के लिए एक समाधान के रूप में, लेख 'onBlur' घटना को सुनने का सुझाव देता है।

https://www.peterbe.com/plog/onchange-in-reactjs

Question 4

हाल ही में मुझे एक बग मिला है जहां onChangeIE11 पर इनपुट फ़ील्ड में कॉपी और पेस्ट की अनुमति नहीं होगी। जबकि onInputघटना उस व्यवहार की अनुमति देती है। मुझे ऐसा कोई दस्तावेज़ नहीं मिला, जो डॉक्स में इसका वर्णन करता हो, लेकिन इससे पता चलता है कि दोनों के बीच अंतर है (अपेक्षित या नहीं)।

Question 5

जैसा कि आप यहां विभिन्न टिप्पणियों में देख सकते हैं, रिएक्ट इस फैसले की खूबियों पर बहस करने के बजाय, ऑन-क्रॉक और ऑन-इंप्यूट को एक समान मानते हैं। यहाँ समाधान है।

जब तक आप उपयोगकर्ता के संपादन को पूरा नहीं करना चाहते तब तक onBlur का उपयोग करें। :)

Question 6

इस मुद्दे पर ठोकर खाने वाले किसी भी व्यक्ति के लिए वास्तविक, changeDOM- आधारित घटना को सुनने का तरीका ढूंढना, यह है कि मैंने यह कैसे किया (टाइपस्क्रिप्ट में लिखा):

import { Component, createElement, InputHTMLAttributes } from 'react';

export interface CustomInputProps {
    onChange?: (event: Event) => void;
    onInput?: (event: Event) => void;
}

/**
 * This component restores the 'onChange' and 'onInput' behavior of JavaScript.
 *
 * See:
 * - https://reactjs.org/docs/dom-elements.html#onchange
 * - https://github.com/facebook/react/issues/3964
 * - https://github.com/facebook/react/issues/9657
 * - https://github.com/facebook/react/issues/14857
 */
export class CustomInput extends Component<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'ref'> & CustomInputProps> {
    private readonly registerCallbacks  = (element: HTMLInputElement | null) => {
        if (element) {
            element.onchange = this.props.onChange ? this.props.onChange : null;
            element.oninput = this.props.onInput ? this.props.onInput : null;
        }
    };

    public render() {
        return <input ref={this.registerCallbacks} {...this.props} onChange={undefined} onInput={undefined} />;
    }
}

कृपया मुझे बताएं कि क्या आप इस दृष्टिकोण को बेहतर बनाने या इसके साथ समस्याओं का सामना करने के तरीके देखते हैं। इसके विपरीत blur, changeउपयोगकर्ता द्वारा दबाए जाने पर ईवेंट को भी ट्रिगर किया जाता है और केवल तभी ट्रिगर किया जाता है जब मूल्य वास्तव में बदल जाता है।

मैं अभी भी इस CustomInputघटक के साथ अनुभव प्राप्त कर रहा हूं । उदाहरण के लिए, चेकबॉक्स अजीब व्यवहार करते हैं। मुझे या तो हैंडलर event.target.checkedमें इनवर्टर देना पड़ता है , onChangeजबकि चेकबॉक्स को वैल्यू पास करने के साथ चेकबॉक्स पर वैल्यू पास करते हैं checkedया चेकबॉक्स पर वैल्यू पास करते समय इस उलटा से छुटकारा पा लेते हैं, defaultCheckedलेकिन इसके बाद यह टूट जाता है कि पेज पर अलग-अलग जगहों पर एक ही स्टेट का प्रतिनिधित्व करने वाले कई चेकबॉक्स सिंक में रहते हैं। । (दोनों मामलों में, मैंने चेकबॉक्स onInputके CustomInputलिए हैंडलर पास नहीं किया है ।)