Заполнить состояние значениями автозаполнения (реагировать)

Question

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

Как я могу получить значение из автозаполнения при загрузке компонента? Автозаполнение не вызывает события onChange или onBlur, и autocomplete = "off" также не работает. (также я бы предпочел не отключать автозаполнение в любом случае)

Answer 1

Недавно я столкнулся с этой проблемой, работая над своей страницей входа. После небольшого исследования я наткнулся на эту проблему , сообщенную на ReactJS github. Чтобы процитировать ключевую часть:

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

Чтобы преодолеть эту проблему, нам нужно:

1. Примите тот факт, что у нас не будет (и никогда не будет) доступа к автозаполненным значениям, когда монтируется узел DOM
2. Примите во внимание проблемы безопасности, возникающие в браузерах

tl; dr - Это преднамеренно по соображениям безопасности, и вместо этого лучше проверять входные данные при отправке.