React: नियंत्रित घटकों पर ब्राउज़र-स्वतः पूर्ण रूप मानों को संभालने का एक तरीका प्रदान करें

यह इस पर कुछ और चर्चा करता है: http://stackoverflow.com/a/11710295

एटीएम मैं इस https://github.com/tbosch/autofill-event का उपयोग कर रहा हूं

मुझे सी.सी.

( @visionscaper टिप: दाएं कॉलम पर "सदस्यता लें" दबाएं।)

किसी भी अद्यतन या इस पर सर्वोत्तम प्रथाओं का सुझाव दिया? ऑटोफिल इवेंट पॉलीफ़िल एक स्लेजहेमर समाधान की तरह लगता है।

सफारी (8) ऑटोफिल पर परिवर्तन की घटनाओं को भेजती है, लेकिन वे बुलबुला नहीं करते हैं ताकि वे प्रतिक्रिया हैंडलर तक न पहुंचें।

Https://github.com/angular/angular.js/issues/1460 पर एक संबंधित चर्चा बंद कर दी गई, कुछ सुझावों के साथ, उनमें से एक https://github.com/tbosch/autofill-event को आग में

मुझे लगता है, हम यहाँ भी बंद कर सकते हैं।

यह एक प्रतिक्रिया के रूप में संभव प्रतिक्रिया के भाग के रूप में ऑटोफिल-घटना के लिए अच्छा होगा। यह कार्यशीलता वस्तुतः हर किसी के लिए आवश्यक है कि वे फॉर्म सत्यापन के लिए प्रतिक्रिया का उपयोग करें। ऑटोफिल-इवेंट स्क्रिप्ट jQuery के लिए एक निर्भरता भी जोड़ती है, जो कई मामलों में अवांछनीय हो सकती है।

यह एक ब्राउज़र बग है जो सभी ब्राउज़रों को थोड़ा अलग तरीके से प्रभावित करता है। मुझे लगता है कि कोणीय के चारों ओर काम करने की कोशिश करने या इसे ठीक करने का कोई मतलब नहीं होना चाहिए। यह एक सामान्य बात है लेकिन मैं समझता हूं कि क्या यह "वॉन्टफिक्स" है।

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

मैंने कोणीय धागे के साथ पकड़ा। फ़ायरफ़ॉक्स में पासवर्ड फ़ील्ड (https://bugzilla.mozilla.org/show_bug.cgi?id=950510 अभी भी खुला है) के साथ समस्या है, सफारी के बग # पर कोई शब्द नहीं है, क्रोम तय है।

कुछ स्थानों पर मुद्दों को पहले से ही ट्रैक किया जा रहा है - https://github.com/angular/angular.js/issues/1460#issuecomment -53947546

क्रोम मुद्दा अब बंद हो गया है, लेकिन यह स्पष्ट रूप से क्रोम 50 में रिएक्ट 0.14.8 के साथ काम नहीं करता है।

अभी तक कोई ठीक नहीं?

मुझे लगता है कि यह कुछ समय के लिए काम कर रहा था और हाल ही में फिर से टूट गया?

इस मुद्दे पर कोई अद्यतन?

यहाँ इस मुद्दे के लिए मेरे समाधान का एक उद्धरण:

export default class Input extends Component {
  static propTypes = {
    value: PropTypes.string,
    onFieldChange: PropTypes.func,
  };

  static defaultProps = {
    value: '',
  }

  componentDidMount() {
    this._listener = setInterval(() => {
      if (!this.input || this._previousValue === this.input.value) {
        return;
      }

      this._previousValue = this.input.value;

      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', true, true);
      this.input.dispatchEvent(evt);
    }, 20);
  }

  componentWillUnmount() {
    clearInterval(this._listener);
  }

  refInput = (input) => this.input = input;

  render() {
    const { label,
      value,
      onFieldChange,
    } = this.props;

    this.input = this.input || { value };

    return (
        <input
            value={this.input.value}
            onChange={onFieldChange}
            ref={this.refInput}
        />
    );
  }
}

नोट: value राज्य से आता है और onFieldChange नए मूल्य के साथ राज्य को अपडेट करता है

सेटइंटरवल कोड https://github.com/Pephers/react-autofill से है

क्या कोई पुष्टि कर सकता है कि यह मुद्दा iOS 10.2 के साथ तय किया गया था? मैं इसे अब पुन: पेश नहीं कर सकता ...

मुझे अभी भी iOS 10.2 पर क्रोम वर्जन 55.0.2883.79 के साथ समस्या हो रही है ... जो कि ऊपर वर्णित है, इसके विपरीत, मेरे लिए स्वतः पूर्ण सामग्री फ़ॉर्म में संक्षिप्त रूप से दिखाई देती है और फिर उसे हटा दिया जाता है।
तो यह अब राज्य में संग्रहीत के साथ संगत है, हालांकि, ऑटोफिल अभी भी काम नहीं करता है ...

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

मैं @irisSchaffer द्वारा सामना किए गए एक ही मुद्दे को फिर से प्रस्तुत कर रहा हूं। मेरे पास एक आइसोमॉर्फिक एप्लिकेशन है, जहां मैं प्रतिक्रिया और एक्सप्रेस के साथ एक स्थिर पृष्ठ प्रस्तुत करता हूं, फिर क्लाइंट पर मैं प्रॉपर निर्यात करता हूं और उसी पेज घटक का उपयोग करता हूं।

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

यह समस्या केवल Chrome पर दिखाई दे रही है, इसका अंतिम संस्करण, 58 का उपयोग कर रहा है।

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

+1। कोई फिक्स या हैक?

मैं अभी भी iOS 10.3.3 क्रोम 60.0.3112.89 iOS पर इस समस्या का सामना कर रहा हूं।

स्वत: भरण कार्य करता है, फ़ील्ड भरता है, लेकिन राज्य नहीं बदलता है।

डेकोरेटर काम-के आसपास: https://github.com/Pephers/react-autofill

सामान्य घटक काम के आसपास:

/**
  Trigger onChange event after browser auto-fill.

  <strong i="8">@see</strong> https://github.com/facebook/react/issues/1159
  <strong i="9">@example</strong> <AutoFillWatch component={ref =>
    <input required type="password" ref={ref} />
  }/>
*/
class AutoFillWatch extends Component {
  static propTypes = {
    // Auto-fill component like: <input type="password"
    component: PropTypes.func.isRequired,

    // component pass-through reference
    ref: PropTypes.func,
  }

  componentDidMount() {
    this._listener = setInterval(() => {
      if (!this.input || this._previousValue === this.input.value) {
        return;
      }

      this._previousValue = this.input.value;

      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', true, true);
      this.input.dispatchEvent(evt);
    }, 100);
  }

  componentWillUnmount() {
    clearInterval(this._listener);
  }

  componentDidMount() {
    const {ref} = this.props
    if(ref) {
      console.log('ref', this.input);
      ref(this.input)
    }
  }

  refInput = (input) => this.input = input;

  render() {
    const {component} = this.props
    return component(this.refInput)
  }
}

IOS के लिए क्रोम (सुनिश्चित करें कि आप क्रोम से ऑटोफिल के साथ परीक्षण करते हैं, और आईओएस कीबोर्ड से सुझाव नहीं) केवल ऑटोफिलिंग मूल्यों के दौरान change उत्सर्जन करता है। दूसरी ओर मोबाइल सफारी focus , keydown , input , keyup , change और blur , के रूप में

React change इवेंट का नियमित <input /> उपयोग नहीं करता है, जो इस मुद्दे का मूल कारण प्रतीत होता है: https://github.com/facebook/react/blob/e932ad68bed656eedb29295b61ba74e5d0857902ed/src/renderers /dom/sared/eventPlugins/ChangeEventPlugin.js#L66 -L71

क्या रिएक्ट onChange भी DOM change घटनाओं पर ट्रिगर नहीं होगा? क्या इसमें कोई नुकसान होगा?

Chrome iOS के लिए संबंधित समस्या: https://bugs.chromium.org/p/chromium/issues/detail?id/707575

मैंने निम्न छोटे पृष्ठ के साथ ऑटोफिलिंग और घटनाओं का परीक्षण किया है:

<html>

<head>
  <script type="text/javascript">
    window.onload = function () {
      let elements = document.querySelectorAll('input');
      let actions = document.getElementById('actions')
      let events = 'focus blur keydown keyup change input'.split(' ');

      elements.forEach(element => {
        events.forEach(event => {
          element.addEventListener(event, e => {
            console.log(e);
            let eTypeNode = document.createTextNode(element.name + ' > ' + e.type + ":" + e.code + ":" + e.keyIdentifier);
            actions.appendChild(eTypeNode);
            actions.appendChild(document.createElement('br'));
          })
        })
      })
    };
  </script>
</head>

<body>
  <form>
    <input type="text" name="name" id="a" autocomplete="name" />
    <input type="email" name="email" id="b" autocomplete="email" />
    <input type="tel" name="tel" id="c" autocomplete="tel" />
  </form>
  <div id="actions"></div>
</body>

</html>

जब आप <form /> तत्व से इनपुट लपेटते हैं, तो Chrome v62 में परिवर्तन ईवेंट उत्सर्जित होता है।

एक onInput ईवेंट हैंडलर theres जो यदि परिवर्तित होता है तो एक इनपुट फ़ील्ड का मान लेगा।

अभी भी आईओएस पर ऑटोफिल के साथ कुछ असामान्य व्यवहार को देखकर। उपरोक्त प्रतिक्रिया-ऑटोफिल डेकोरेटर सरल ऑटोफिल के साथ अच्छी तरह से काम करता है, लेकिन कीबोर्ड द्वारा प्रदान की गई ऑटोफिल शॉर्टकट नहीं।

इसे अभी iOS के लिए Chrome में ठीक किया जाना चाहिए: https://chromium.googlesource.com/chromium/src/+/55518e17850cac0bdc6fca7b24092bea479e34db। मुझे यकीन नहीं है कि जब इस पैच को एक जारी संस्करण में शामिल किया जाएगा।

OnChange का उपयोग क्यों किया जाना चाहिए?
हम 'का उपयोग नहीं करते हैं क्योंकि' परिवर्तन नहीं है 'लेकिन परिवर्तन की घटना'

class Input extends Component {
    componentDidMount(){
        this.input.addEventListener('change', (e)=>{
            this.props.onChange(this.props.field, e.target.value)
        })
    }
    render(){
        const { className, name, label, autofill, field, onBlur, onChange, value, error, visited, required, type, maxLength } = this.props
        return (
            <div className={ [styles.inputWrap, className || ''].join(' ') } onBlur={e => onBlur(field)}>
                <input ref={n => this.input = n} id={field} name={name || field} type={ type || 'text' } defaultValue={ value }
                 autoComplete={ autofill } maxLength={maxLength} />
                <div className={ [styles.placeholder, value? styles.active:''].join(' ') }>
                    <FormattedMessage id={label} />
                    <i className={styles.required}>{required? '*':''}</i>
                    <span className={ styles.error }>{ visited? error:'' }</span>
                </div>
            </div>
        )
    }
}

जब आप <form /> तत्व से इनपुट लपेटते हैं, तो Chrome v62 में परिवर्तन ईवेंट उत्सर्जित होता है।

मैं पुष्टि करता हूं कि यह समाधान autoComplete="tel" माध्यम से फ़ोन नंबर के लिए Chrome के लिए काम करता है
https://github.com/catamphetamine/react-phone-number-input/issues/101

ऊपर दिए गए समाधान this._previousValue !== this.input.value दुर्भाग्य से केवल iOS सफारी के लिए काम करते हैं। iOS क्रोम का .value एक ऑटोफिल के बाद भी खाली है।

मुझे कोई अंदाजा नहीं है कि नियंत्रित घटकों का उपयोग करते समय लोग कैसे रूपों में ऑटोफिल संभाल रहे हैं। इस लॉगिन परिदृश्य पर विचार करें:

• ऑटोफ़िल ईमेल: कुछ भी नहीं बदलता है, यहां तक ​​कि डिस्पैच हैक के साथ भी क्रोम ईमेल .value खाली के रूप में रिपोर्ट करेगा
• पासवर्ड फ़ील्ड में मान लिखना प्रारंभ करें: ईमेल खो जाता है क्योंकि प्रतिक्रिया स्थिति सोचती है कि यह खाली है

जब तक कि क्रोम के मूल्य को अनियंत्रित घटकों, एचटीएमएल 5 इनपुट सत्यापन का उपयोग करने और पुराने दिनों की तरह सबमिट करने पर फ़ॉर्म मान प्राप्त करने के अलावा अन्य समाधान के बारे में नहीं सोच सकता, तब तक कोई रास्ता नहीं है।

आप इस मुद्दे को ट्रैक (और स्टार) कर सकते हैं: https://bugs.chromium.org/p/chromium/issues/detail?id=813175

मुझे @DominicTobias या तो काम करने के लिए उपरोक्त समाधान नहीं मिला। समस्याओं की कई परतें हैं। पहला यह था कि this.input.value हमेशा रिक्त के रूप में वापस आते थे। हालाँकि, मुझे पता चला, कि यदि आप प्रत्येक लूप में document.getElementById का उपयोग करते हैं, तो document.getElementById(id).value - आपको एक मान वापस मिलेगा।

यह dispatchEvent समस्या को हल नहीं करता है, लेकिन कम से कम आप स्वत: पूर्ण मान प्राप्त कर सकते हैं और इसके साथ सामान कर सकते हैं (उदाहरण के लिए एक नियंत्रित इनपुट के onChange हैंडलर को कॉल करना)।

@ जानने के लिए अच्छा है (और कितना अजीब)! मुझे उस मार्ग से नीचे जाना होगा, भले ही वे मेरी रिहाई के लिए समय पर बग को ठीक न करें

@wlingke क्रोम लोगों के लिए एक डेमो सेट onChange प्रतिक्रिया में एक सिंथेटिक घटना है जो वास्तव में change घटना का उपयोग नहीं करती है, जो मुझे बहुत अजीब लगता है।

आप नीचे दिए गए डेमो में भी देख सकते हैं कि यह अलग तरह से व्यवहार करता है, जैसे कि यह input घटना के लिए सुन रहा है। जब आप असली change घटना का उपयोग करते हैं तो यह iOS क्रोम में ठीक से काम करता है।

तो मैं सुझाव दूंगा कि तत्व को एक रेफरी मिलना और सिर्फ वास्तविक परिवर्तन घटना को सुनना, साथ ही onChange घटना जो input घटना प्रतीत होती है यदि आपको राज्य को अपडेट करने की आवश्यकता है उपयोगकर्ता टाइप कर रहा है।

डेमो: https://kind-stallman-f3c045.netlify.com/

@DominicTobias मैंने पहले दोनों change और input घटनाओं के साथ-साथ उस डेकोरेटर में एक बार दोनों की कोशिश की, लेकिन अपने ऐप में काम करने में सक्षम नहीं था।

इसके अलावा, मुझे यकीन नहीं है कि यह चीजें बदल जाती हैं .. लेकिन एक अंतर है जब एक फ़ील्ड को ऑटोफिलिंग करना MULTIPLE फ़ील्ड को ऑटोफ़िल करना। input घटना ने एक क्षेत्र को स्वचालित करते समय ठीक काम किया। हालाँकि, मोबाइल क्रोम में आप वास्तव में कीबोर्ड से एक ही बार में फ़ील्ड का एक सेट ऑटोफ़िल कर सकते हैं (जैसे फर्स्टनेम, लास्टनाम, ईमेल सभी एक टैप से)।

उस दूसरे परिदृश्य में, डेकोरेटर पहले फ़ील्ड को सही ढंग से ऑटोफ़िल करता है (पहला फ़ील्ड जिसका अर्थ है कि वर्तमान में फ़ोकस है)। हालाँकि, डेकोरेटर (जो सभी 3 क्षेत्रों से जुड़ा हुआ है), अन्य क्षेत्रों में काम नहीं करता है।

@wlingke रुचिकर, मैंने कुछ और फ़ील्ड जोड़े, लेकिन जब iOS क्रोम में तीनों को एक साथ

(स्क्रीनशॉट डेस्कटॉप ब्राउज़र से है लेकिन मुझे अपने फ़ोन पर वही परिणाम मिल रहा है)

@DominicTobias मुझे लगता है कि यदि आप input इवेंट का उपयोग करते हैं - जो कि मैंने पहले उपयोग किया था, तो यह डेस्कटॉप में पूरी तरह से काम करेगा। और मोबाइल में पहले इनपुट के लिए काम करें।

input घटना प्रतिक्रिया करने के लिए onChange निकटतम है। तत्व के बाद change घटना केवल फाइलों को खो देती है जो मुझे समझ में आता है (https://stackoverflow.com/questions/17047497/what-is-the-difference-between-change-and-input-event- के लिए-एक-इनपुट-तत्व)

हां प्रतिक्रिया में किसी कारण के लिए बाध्य है onChange से input घटना: https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput

इसलिए चीजों को सरल रखने के लिए मैं इसे वास्तविक परिवर्तन की घटनाओं (साथ ही सामान्य इनपुट इनपुट) के लिए अपने Input घटक में भी कहता हूं। अब यह iOS क्रोम में काम कर रहा है। इसे आज़माएं और मुझे बताएं!

componentDidMount() {
  this.inputRef.addEventListener('change', this.onChange);
}

onChange = (event) => {
  // React actually uses the input even for onChange, this causes autofill to
  // break in iOS Chrome as it only fires a change event.
  if (this.props.onChange) {
    this.props.onChange(event);
  }
}

componentWillUnount() {
  this.inputRef.removeEventListener('change', this.onChange);
}

संपादित करें: Chrome को v65 में तय किया गया है, लेकिन लोग रिपोर्ट कर रहे हैं कि यह अभी भी काम नहीं करता है: /

डोमिनिक व्याख्या के लिए धन्यवाद। हमने दिसंबर में उस व्यवहार को ठीक किया। अब हम कीडाउन, चेंज, इनपुट और कीअप इवेंट्स को फायर करते हैं।
https://chromium-review.googlesource.com/c/chromium/src/+/771674

हमने रिएक्ट के लिए भी ठीक किया था।
https://chromium-review.googlesource.com/c/chromium/src/+/844324

जबकि यह ऑटोफिल व्यवहार को ठीक करता है, यह अभी भी ऑनकॉन्ग हैंडलर को लागू नहीं करता है।

मैंने इस पर एक मुद्दा भी उठाया और देव को यकीन था कि यह 65 में तय होने जा रहा था ... https://bugs.chromium.org/p/chromium/issues/detail?id=813175

मैं नेटिव change इवेंट को भी सुन रहा हूं, जैसे @DominicTobias करता है और यह मेरे लिए iOS क्रोम में काम करता है। मैं आरोह में संलग्न नेटिव इवेंट श्रोता में Redux-form के onChange को ट्रिगर कर रहा हूँ।

मैं स्टाइल के लिए input:-webkit-autofill चयनकर्ता का भी उपयोग कर रहा हूं।

Https://labrewlangerie.com (संपर्क फ़ॉर्म) के नीचे अपने लिए परिणाम देखें।

लगता है कि यह फिक्स आखिरकार क्रोम iOS में आ गया है! हालांकि किस संस्करण में यह सुनिश्चित नहीं हुआ है, क्योंकि यह 1 दिसंबर को विलय कर दिया गया है।

https://bugs.chromium.org/p/chromium/issues/detail?id=705275#c11
https://chromium-review.googlesource.com/c/chromium/src/+/771674

https://chromium.googlesource.com/chromium/src/+/55518e17850cac0bdc6fca7b24092bea479e34db

https://storage.googleapis.com/chromium-find-releases-static/555.html#55518e17850cac0bdc6fca7b24092bea479e34db

यह पहले से ही नवीनतम क्रोम में होना चाहिए। मैं अभी भी इस मुद्दे (कोणीय 5) का सामना कर रहा हूं।

यहाँ क्रोम 65, रिएक्ट 15.6 में समान है।

यह शर्म की बात है, महमदी ने कहा कि यह 13 मार्च को v65 :(

टिप्पणी 15 [email protected] द्वारा, 9 मार्च
क्रोम 64 में ठीक नहीं है। मेरा बुरा। क्रोम 65 में (13 मार्च से शुरू किया जाएगा)। मैंने सिर्फ आपकी मूल घटनाओं की डेमो वेबसाइट का परीक्षण किया है और यह क्रोम 65 पर काम करता है। मैं इस पर आपकी सराहना करता हूं।

https://bugs.chromium.org/p/chromium/issues/detail?id=813175

अपने फोन पर यहां जाकर देखें :

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

मूल रूप से मैं अब होने वाली इनपुट घटना देख सकता हूं (https://kind-stallman-f3c045.netlify.com/nn.html:

लेकिन किसी भी तरह रिएक्ट उन घटनाओं में से कोई भी प्राप्त नहीं कर रहा है (https://kind-stallman-f3c045.netlify.com):

इनपुट पर onBlur = {this.handleChange} जोड़ें

KlarnaUI की टीम ने onAnimationStart इवेंट और :-webkit-autofill pseudo क्लास का शोषण करने वाले इस मुद्दे से निपटने के लिए एक दिलचस्प हैक किया है जैसा कि इस लेख में वर्णित है - https://medium.com/@brunn/detecting -autofilled- खेतों में जावास्क्रिप्ट-aed598d25da7

हमने इस हैक का उपयोग अपने अनुप्रयोगों में किया है जो ठीक काम करता है (केवल क्रोम पर परीक्षण कर सकता है)। मैं इस तकनीक का उपयोग करके एक शिम के साथ आने की कोशिश करूंगा ताकि यह सामान्य हो।

मुद्दे पर कोई अपडेट?

ऊपर, इस समय के लिए सबसे अच्छी चाल क्या है?

@ericflo @sophiebits

यह समस्या अभी भी बनी हुई है, कोई भी अपडेट?

@Pixelatex @Aarbel मेरा जवाब थोड़ा और ऊपर देखें - https://github.com/facebook/react/issues/1159#issuecomment -371604044

मूल रूप से प्रतिक्रिया input घटना नहीं change onChange के लिए सुनती है, इसलिए इसका उत्तर दोनों को सुनता है।

@DominicTobias मैंने यह कोशिश की, लेकिन इस काम को करने के लिए हमें पृष्ठ में कहीं वास्तविक क्लिक करने की आवश्यकता है। तब तक घटना दर्ज नहीं होती है।

अब लगभग एक दिन के लिए इस मुद्दे पर संघर्ष कर रहे हैं। मैं निश्चित रूप से सूचीबद्ध कर सकता हूं कि डेस्कटॉप क्रोम 67 और प्रतिक्रिया 15.6.0 में क्या काम नहीं करता है:

1. onAnimationStart input:-webkit-autofill https://medium.com/@brunn/detecting -autofilled-फ़ील्ड-इन-जावास्क्रिप्ट-aed598d25da7 - समय से पहले आग (अभी तक फॉर्म नहीं भरा गया है)
2. this.inputRef.addEventListener("transitionend", this.doSomething, false) input:-webkit-autofill css संक्रमण के साथ संयोजन में - समय पर आग लग जाती है लेकिन आप पृष्ठ को नहीं जा सकते, जैसा कि @Pixelatex ने उल्लेख किया है
3. this.inputRef.addEventListener("change", this.doSomething) - जब तक आप पृष्ठ पर क्लिक नहीं करते तब तक आग नहीं लगती
4. onBlur={this.doSomething} - एक घटना को आग नहीं देता है

फिर, ये समाधान दुर्भाग्य से काम नहीं करते हैं। जब तक आप पृष्ठ को प्रोक नहीं करते HTML में स्वतः पूर्ण मूल्य नहीं होता है। निकटतम 2 है जैसा कि आप कंसोल में document टाइप कर सकते हैं और यह पेज को जगाएगा, और अब तक प्रोग्रामेटिक रूप से यह काम नहीं किया।
@DominicTobias क्या आपका समाधान डेस्कटॉप क्रोम पर काम करता है?

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

सीएसएस:

input:-webkit-autofill {
    transition: background-color 0.1s ease-in-out 0s;
}

निर्माता में:

this.autofillCompleted = this.autofillCompleted.bind(this)

अपने प्रतिक्रिया घटक वर्ग के अंदर:

componentDidMount(){
if(this.myInputRef)
      this.myInputRef.addEventListener("transitionend", this.autofillCompleted, false)
}
autofillCompleted(){
    this.setState({ submitActive: true });
}
componentWillUnmount(){
    if(this.myInputRef)
      this.myInputRef.removeEventListener("transitionend", this.autofillCompleted, false)
}

JSX के अंदर:

<FormControl
            inputRef={(node) => this.myInputRef= node}
/>

बुनियादी घटकों के लिए पी एस (जैसे input ), का उपयोग ref बजाय सहारा inputRef

नवीनतम क्रोम डेस्कटॉप और आईओएस 12 सफारी में, <form> में तत्वों को लपेटने से ऑनकॉन्ग इवेंट का उत्सर्जन करने के लिए स्वत: पूर्ण हो जाता है।

@ आरएक्सबी <p> </p> में लपेटता है ?

@basarat क्षमा करें, मेरा कोड <form> टैग

इस मुद्दे पर कोई अपडेट?

इस मुद्दे पर कोई अपडेट?

अगर अपडेट होते, तो वे इस मुद्दे पर होते।

कृपया पोस्ट न करें यदि आपके पास जोड़ने के लिए कुछ भी सार्थक नहीं है - आप हर उस व्यक्ति को स्पैम कर रहे हैं जो इस मुद्दे के लिए सदस्यता लिया है। धन्यवाद।

मैंने इस पर एक मुद्दा भी उठाया और देव को यकीन था कि यह 65 में तय होने जा रहा था ... https://bugs.chromium.org/p/chromium/issues/detail?id=813175

दुर्भाग्य से यह फिक्स रिएक्ट टीम के साथ समन्वित नहीं था। हमें पता नहीं था कि iOS पर क्रोम अब एक संपत्ति सेट करता है जो गलती से पिछले संस्करणों में परिवर्तन हैंडलर को ट्रिगर करने के लिए हुआ था। यह समर्थन करने के लिए हमारी तरफ से जानबूझकर नहीं किया गया था - और हमने पहले से ही एक बदलाव किया जिसने व्यवहार को हटा दिया (हमें पता नहीं था कि क्रोम ने इस पर भरोसा करना शुरू कर दिया था)।

यदि आप एक ब्राउज़र पर काम कर रहे हैं और एक प्रतिक्रिया-विशिष्ट हैक जोड़ रहे हैं, तो कृपया प्रतिक्रिया टीम से किसी में लूप सुनिश्चित करें।

क्या कोई इसे वर्तमान बग तक उबाल सकता है। रिएक्ट बीओटीएच change और input इनपुट के लिए घटनाओं को संभालता है। यदि ऑटोफिल उन दोनों में से किसी में भी आग लगाता है तो उसे काम करना चाहिए। इसलिए यह स्पष्ट नहीं है कि यहां मूल मुद्दा अभी भी प्रासंगिक है। या यहां कुछ चीजें हैं जो अलग-अलग मुद्दे हो सकते हैं

• मान स्वत: पूर्व "रेंडर" हैं जैसे कि एक SSR पृष्ठ था जो प्रतिक्रिया हाइड्रेटिंग है। मेरा मानना ​​है कि हम उस मामले में सही मूल्य का उपयोग करते हैं (cc @nhunzaker)
• इनपुट्स ऑटोफिल पर घटनाओं को फायर नहीं करते हैं
• इनपुट्स अलग घटना की फिर से आग लगाता है रिएक्ट के लिए सुन रहा है (यह v15 के रूप में हल किया जाना चाहिए)

क्या ऐसा कुछ है जो मैंने यहाँ याद किया है, और क्या कोई जानता है कि कौन से ब्राउज़र सही तरीके से व्यवहार नहीं करते हैं या नहीं करते हैं?

Btw हम इसे # 9657 के एक भाग के रूप में विचार करना चाहते हैं - आदर्श रूप से हम जो कुछ भी करते हैं वह इस मुद्दे को हल करने में मदद करने की सेवा में आंशिक रूप से होना चाहिए।

@ हम सही मूल्य का उपयोग करते हैं, लेकिन हम एक परिवर्तन घटना नहीं भेजते हैं:

http://react-hydration.surge.sh/hydration

1. "ऑटो-हाइड्रेट" को अनचेक करें
2. मान बदलें
3. हाइड्रेट पर क्लिक करें
4. कोई परिवर्तन नहीं होता है :(

ठीक है मैंने थोड़ा शोध किया है:

मुझे लगता है कि यहां दो मुद्दे हैं:

• रिएक्ट हाइड्रेट्स खो जाने से पहले ब्राउज़र द्वारा भरे गए मान।
• IOS पर क्रोम ऑटोफिल पर किसी भी घटना को आग नहीं देता है

यहाँ एक साइट है जिसका उपयोग मैं परीक्षण करने के लिए कर सकता हूँ: https://jquense.github.io/browser-test-pages/autofill/login/

मैं जो अन्य सभी प्लेटफार्मों और ब्राउज़रों से कह सकता हूं, वे ऑटोफिल्ड मूल्यों का चयन करने के लिए ठीक काम करते हैं

नोट ऊपर एक gatsby पेज है इसलिए _also_ SSR समस्या को प्रदर्शित करता है

@nhunzaker आपके पास IOS क्रोम मामले के बारे में चतुर विचार हैं? Vue punted https://github.com/vuejs/vue/issues/7058 जैसा दिखता है

प्रतिक्रिया स्वतः पूर्ण नहीं करती है

मैंने iOS के मुद्दे पर Chrome के लिए एक नया Chrome बग दर्ज किया है: https://bugs.chromium.org/p/chromium/issues/detail?id=895898

क्या आपने इनपुट के लिए 'नाम' विशेषता को परिभाषित करने की कोशिश की है? इससे मेरा काम बनता है। onChange उपयोगकर्ता ऑटोफिल पर चालू हो जाता है

@eatsjobs हम attr नाम का उपयोग करते हैं, लेकिन एक ही मुद्दा है।

मैंने परीक्षण किया

$$(':-webkit-autofill')

क्रोम 70 पर काम करता है, ऑटो-भरा इनपुट देता है।

मेरे लिए @QuantumInformation वही :(

handleOnChange = e => {
  this.setState({ email: e.target.value }, () => {
    alert(this.state.email)
  })
}

<form>
  <input
    name="email"
    type="email"
    placeholder="Enter Your Email"
    autocomplete="email"
    value={this.state.email}
    onChange={e => this.handleOnChange(e)}
   />
</form>

मैं इस तरह से कोशिश करता हूं, जैसे कि काम करना ठीक रहता है।
ऑटोफिल ने मेरे राज्य को सही ढंग से सेट किया। (आईओएस 12)

उन लोगों के लिए जो हाल ही में इस मुद्दे पर आए थे, यह सुरक्षा के जोखिमों से बचने के लिए जानबूझकर ब्राउज़र के कारण होता है।

यदि हम पृष्ठ लोड होते ही स्वतः पूर्ण मूल्यों तक पहुँचने में सक्षम होते हैं, तो फ़िशिंग के लिए इच्छित प्रपत्र पर जानकारी निकालने के लिए दुर्भावनापूर्ण कोड लिखना बहुत आसान हो जाएगा। उपयोगकर्ता को प्रतिक्रिया देने का कोई मौका नहीं दिया गया। संभवतः इस कारण का कारण है कि autocomplete="off" को ब्राउज़र द्वारा अनदेखा किया जाता है।

इस समस्या को दूर करने के लिए हमें निम्न की आवश्यकता है:

1. इस तथ्य को स्वीकार करें कि जब हम डोम नोड की गणना करते हैं तो (और कभी नहीं) स्वतः पूर्ण मूल्यों तक पहुंच होगी
2. ब्राउज़र द्वारा लाए गए सुरक्षा चिंताओं को गले लगाओ

इस समस्या को हल करने के लिए, यह सोचें कि कैसे मूल रूप से डिज़ाइन किए गए थे और उनका उपयोग करने का इरादा था। जब उपयोगकर्ता <button type="submit" /> एक <form> <button type="submit" /> अंदर क्लिक करता है, तो यह मूल रूप से कह रहा है "अरे यह क्रिया उपयोगकर्ता द्वारा अभीष्ट है, चलो अब फॉर्म वैल्यू का मूल्यांकन करते हैं"।

प्रतिक्रिया में लिखे एक बहुत ही सरल साइनइनफ़ॉर्म के इस उदाहरण पर विचार करें:

import React from 'react';

class SignInForm extends React.Component {
  constructor() {
    this.state = {
      email: '',
      password: '',
    };

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmail(event) {
    this.setState({ email: event.target.value });
  }

  handlePassword(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit() {
   console.log(this.state.email); // The email value
   console.log(this.state.password); // The password value
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <input
            name="email"
            type="text"
            value={this.state.email}
            onChange={this.handleEmail}
            placeholder="Email"
          />
         <input
            name="password"
            type="text"
            value={this.state.password}
            onChange={this.handlePassword}
            placeholder="Password"
          />
          <button type="submit" onClick={this.handleSubmit}>Sign In</button>
        </form>
    );
  }
}

export default SignInForm;

सबमिट करने पर, प्रपत्र उसी के अनुसार इनपुट फ़ील्ड को अपडेट और मूल्यांकन करेगा।

इसका मतलब है की:

1. हम सबमिट बटन को बिल्कुल भी अक्षम नहीं कर सकते
2. उपयोगकर्ता द्वारा इस बटन पर क्लिक करने पर सभी सत्यापन होने चाहिए

मेरी राय में, यह सबसे व्यावहारिक दृष्टिकोण है और बहुत सारे सिरदर्द को बचाएगा। मुझे उम्मीद है कि यह भविष्य में दूसरों की मदद करता है।

संपादित करें: उन लोगों के लिए जो रिएक्ट से अपरिचित हैं, आप इस लिंक पर एक फॉर्म के बुनियादी कार्यान्वयन और कुछ अतिरिक्त रसदार जानकारी के लिए देख सकते हैं: https://html.spec.whatwg.org/multipage/forms.html

उन लोगों के लिए जो हाल ही में इस मुद्दे पर आए थे, यह सुरक्षा के जोखिमों से बचने के लिए जानबूझकर ब्राउज़र के कारण होता है।

यदि हम पृष्ठ लोड होते ही स्वतः पूर्ण मूल्यों तक पहुँचने में सक्षम होते हैं, तो फ़िशिंग के लिए इच्छित प्रपत्र पर जानकारी निकालने के लिए दुर्भावनापूर्ण कोड लिखना बहुत आसान हो जाएगा। उपयोगकर्ता को प्रतिक्रिया देने का कोई मौका नहीं दिया गया। संभवतः इस कारण का कारण है कि autocomplete="off" को ब्राउज़र द्वारा अनदेखा किया जाता है।

इस समस्या को दूर करने के लिए हमें निम्न की आवश्यकता है:

1. इस तथ्य को स्वीकार करें कि जब हम डोम नोड की गणना करते हैं तो (और कभी नहीं) स्वतः पूर्ण मूल्यों तक पहुंच होगी
2. ब्राउज़र द्वारा लाए गए सुरक्षा चिंताओं को गले लगाओ

इस समस्या को हल करने के लिए, यह सोचें कि कैसे मूल रूप से डिज़ाइन किए गए थे और उनका उपयोग करने का इरादा था। जब उपयोगकर्ता <button type="submit" /> एक <form> <button type="submit" /> अंदर क्लिक करता है, तो यह मूल रूप से कह रहा है "अरे यह क्रिया उपयोगकर्ता द्वारा अभीष्ट है, चलो अब फॉर्म वैल्यू का मूल्यांकन करते हैं"।

प्रतिक्रिया में लिखे एक बहुत ही सरल साइनइनफ़ॉर्म के इस उदाहरण पर विचार करें:

import React from 'react';

class SignInForm extends React.Component {
  constructor() {
    this.state = {
      email: '',
      password: '',
    };

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmail(event) {
    this.setState({ email: event.target.value });
  }

  handlePassword(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit() {
   console.log(this.state.email); // The email value
   console.log(this.state.password); // The password value
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <input
            name="email"
            type="text"
            value={this.state.email}
            onChange={this.handleEmail}
            placeholder="Email"
          />
         <input
            name="password"
            type="text"
            value={this.state.password}
            onChange={this.handlePassword}
            placeholder="Password"
          />
          <button type="submit" onClick={this.handleSubmit}>Sign In</button>
        </form>
    );
  }
}

export default SignInForm;

सबमिट करने पर, प्रपत्र उसी के अनुसार इनपुट फ़ील्ड को अपडेट और मूल्यांकन करेगा।

इसका मतलब है की:

1. हम सबमिट बटन को बिल्कुल भी अक्षम नहीं कर सकते
2. उपयोगकर्ता द्वारा इस बटन पर क्लिक करने पर सभी सत्यापन होने चाहिए

मेरी राय में, यह सबसे व्यावहारिक दृष्टिकोण है और बहुत सारे सिरदर्द को बचाएगा। मुझे उम्मीद है कि यह भविष्य में दूसरों की मदद करता है।

संपादित करें: उन लोगों के लिए जो रिएक्ट से अपरिचित हैं, आप इस लिंक पर एक फॉर्म के बुनियादी कार्यान्वयन और कुछ अतिरिक्त रसदार जानकारी के लिए देख सकते हैं: https://html.spec.whatwg.org/multipage/forms.html

सारांश के लिए धन्यवाद, हालांकि मैं पूरी तरह से भ्रमित हूं। आप कहते हैं कि जब हम कोई फ़ॉर्म सबमिट करते हैं, तो यह "तदनुसार अद्यतन" होगा। क्या इसका मतलब यह है कि यह प्रत्येक घटना के लिए अतिरिक्त परिवर्तन की घटनाओं को आग देगा, जो ऑटो को प्रस्तुत करने की घटना को पूरा करने से पहले भरेगी? या इसका मतलब यह है कि जब जमा घटना को निकाल दिया जाता है तो मूल्यों को अब रिफल्स के माध्यम से पढ़ा जा सकता है? यदि यह पूर्व है तो हम स्निपेट में दिखाए गए घटकों को बना सकते हैं। यदि यह बाद की बात है तो हमें आगे बढ़ने वाले रूपों के लिए रेफ आधारित दृष्टिकोण अपनाने की आवश्यकता होगी।

@thomasjulianstoelen आपका क्या मतलब था?

@dwoodwardgb
मेरे अनुभव में (क्रोम के साथ, कम से कम), यह पृष्ठ (क्लिक, फॉर्म सबमिशन, आदि) के साथ उपयोगकर्ता की पहली बातचीत पर फ़ील्ड्स को अपडेट कर रहा है, और बदलाव के साथ घटनाओं को प्रस्तुत कर रहा है, जिससे मॉडल चर को अपडेट करने की अनुमति मिलती है। मैंने अभी तक अन्य ब्राउज़रों का परीक्षण नहीं किया है।

आप स्वत: पूर्ण = "बंद" विशेषता (HTML5) सेट कर सकते हैं, या url हैश में रिकॉर्ड इनपुट मान दे सकते हैं।

इस मुद्दे को थोड़ा और खोदें: क्रोमियम ने इस बग रिपोर्ट के आधार पर "परिवर्तन" और "इनपुट" दोनों देशी घटनाओं का उत्सर्जन करने के लिए एक बदलाव किया: https://bugs.chromium.org/p/chromium/issues/detail?id= 813,175। हालाँकि, किसी कारण से रिएक्ट अभी भी इन मूल घटनाओं में से किसी के जवाब में onChange इवेंट को ट्रिगर नहीं करता है। यह संभवतः रिएक्ट के डिडुप्लीकेशन लॉजिक (https://github.com/facebook/react/issues/10135) से संबंधित है या यह तथ्य कि iOS पर क्रोम द्वारा प्रोग्राम किए गए ईवेंट isTrusted=false फ्लैग ले जाते हैं।

क्या रिएक्ट टीम का कोई व्यक्ति रिएक्ट onChange इवेंट हैंडलर में गहराई से देख सकता है कि इस घटना को ट्रिगर क्यों नहीं किया जा रहा है? @gaearon या @zpao (यादृच्छिक अनुमान)?

इस बीच, मैं onInput इवेंट का उपयोग कर रहा हूं, जो सीधे "इनपुट" इवेंट के लिए सुनता है।

मुझे लगता है कि यह क्रोम में ऐसा व्यवहार है जिसने व्यवहार को तोड़ दिया:

https://chromium.googlesource.com/chromium/src/+/49bf3cbf7cc6d70643197a604090f8729f9d7404%5E%21/components/autofill/ios/fill/resources/fill.js

यह परिवर्तन घटना से simulated ध्वज को हटाता है, जो संभवतः इन घटनाओं को अनदेखा करने के लिए तर्कपूर्ण तर्क का कारण बनता है।

@nfiacco जो प्रतिबद्ध है, 2018 से है, इस मुद्दे को 2014 में खोला गया था, इसलिए सतह पर जो नहीं

मैं 2022 से वापस आ गया