Автозаполнение не срабатывает при изменении

Я создал пример приложения здесь https://codesandbox.io/s/ynkvmv16v

Это решит вашу проблему?

event.target.click() будет «имитировать» щелчок и запускать события onClick(), но не будет действовать как физический щелчок в окне браузера.

Вы уже пробовали использовать focus() вместо (или в дополнение) click()? Вы можете попробовать сфокусироваться на своем элементе ввода, а затем проверить, установлено ли значение. Если это сработает, вы можете добавить this.setState({ email: event.target.value }) как к фокусу, так и к клику.

Не нужно запускать событие клика, я думаю, было бы лучше, если бы вы установили состояние email в componentDidMount вот так

this.setState({ email: document.getElementById('email').value })

поэтому после вызова componentDidMount() вы получите электронное письмо, заполненное Chrome, и обновите state, затем отобразите кнопку отправки и включите ее.

Подробнее о жизненном цикле React можно прочитать в этом связь.

Ответ будет заключаться в том, чтобы либо отключить автозаполнение для формы, используя autocomplete="off" в вашей форме, либо опросить через регулярные промежутки времени, чтобы увидеть, заполнена ли она.

The problem is autofill is handled differently by different browsers. Some dispatch the change event, some don't. So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field.

• Change event trigger for different browsers:

  • For username/password fields:

    1. Firefox 4, IE 7, and IE 8 don't dispatch the change event.
    2. Safari 5 and Chrome 9 do dispatch the change event.

  • For other form fields:

    1. IE 7 and IE 8 don't dispatch the change event.
    2. Firefox 4 does dispatch the change change event when users select a value from a list of suggestions and tab out of the field.
    3. Chrome 9 does not dispatch the change event.
    4. Safari 5 does dispatch the change event.

You best options are to either disable autocomplete for a form using autocomplete = "off" in your form or poll at regular interval to see if its filled.

For your question on whether it is filled on or before document.ready again it varies from browser to browser and even version to version. For username/password fields only when you select a username password field is filled. So altogether you would have a very messy code if you try to attach to any event.

You can have a good read on this HERE

Взгляните на эту тему: Обнаружение автозаполнения браузера

Я наткнулся на эту проблему, потому что у меня была такая же проблема. Не в React, но проблема универсальная. Может быть, это поможет любому, кто наткнется на это.

Ни один из других ответов на самом деле не отвечает на проблему. Проблема, описанная OP, заключается в том, что Chrome не устанавливает значение входов до момента взаимодействия пользователя со страницей. Это может быть щелчок по странице или даже ввод случайных вещей в консоль.

После взаимодействия с пользователем устанавливаются значения входов и запускается событие изменения.

Вы даже можете увидеть это визуально, так как стиль автозаполненного текста отличается при первом представлении и меняется на стиль ввода после взаимодействия.

Кроме того: запуск щелчка или установка фокуса или что-то еще из кода не помогает, только реальное человеческое взаимодействие.

Таким образом, опрос значения не является решением, потому что значение останется пустым, если страница не будет нажата. Также заявление о том, что вы не можете полагаться на событие изменения, на самом деле не имеет значения, поскольку событие является правильно срабатывает при отложенной установке значения. Проблема в неопределенной задержке.

Однако вы можете опросить наличие псевдоклассов CSS Chrome. В Chrome 83 (июнь 2020 г.) это :-internal-autofill-selected и :-internal-autofill-previewed. Однако они регулярно меняются. Кроме того, они не присутствуют непосредственно после рендеринга. Поэтому вы должны установить достаточный тайм-аут или опросить его.

Небрежный пример в ванильном JavaScript:

var input = document.getElementById('#someinput');

setTimeout(() => {
   if (input.matches(':-internal-autofill-selected')) {
      /* do something */
   }
}, 500);

Вы все еще не можете получить значение на данный момент, поэтому в этом отношении это все еще не решает проблему, но, по крайней мере, вы можете включить кнопку отправки на основе наличия автоматически заполненных данных (как хотел сделать ОП). Или сделать что-то другое визуальное.

Использование oninput вместо onchange поможет.

Если данные заполняются в форме с помощью автозаполнения, и вы пытаетесь отправить форму напрямую, браузер, такой как firefox, не принимает входные данные, потому что он не находится в состоянии этого ввода.

Но мы можем решить эту проблему с помощью хука useEffect или в componentDidMount, если вы используете компонент на основе классов.

useEffect(() => {

 setUserName(document.getElementById('username').value);

}, [])

setUserName здесь — метод установки состояния, замените его своим. Измените имя пользователя на идентификатор поля ввода.