我如何解决React登录表单状态和浏览器自动填充的问题

当我在一个项目中偶然发现一个问题时,我有一个使用React构建的表单,以及浏览器如何自动与其交互。

您知道吗,因为您过去曾经输入过用户名/密码,浏览器会自动将其输入吗?

那是自动填充,这就是我的问题的原因。特别是,我在Chrome和Firefox上复制了它,但是任何浏览器都可能会遇到此问题。

该表单是使用useState钩。

这是一个例子email表格的栏位:

import { useState } from 'react'

//… const [email, setEmail] = useState(’’)

<input
id=‘email’
type=‘email’
name=‘email’ value={email} onChange={(event) => setEmail(event.target.value)} />

当您在其中键入电子邮件时,email值使用更新setEmail并且可以在表单提交事件中使用它,因此可以将其发送到服务器。

在某个时候,我意识到浏览器正在自动填充电子邮件和密码,但是React无法识别它!

也许是因为它在React完全运行之前就填充了该字段,所以它不可能拦截该事件。

我进行了一些研究,迷失于浏览器的矛盾之处以及自动填充功能的差异,因此我不得不创建一个简单的解决方法。

我做到了useRefuseEffect

import { useState, useEffect, useRef } from 'react'

我创建一个参考:

const emailField = useRef(null)

并在JSX中将其附加到输入字段:

<input
  ref={emailField}
  id='email'
  type='email'                   
  name='email'
  value={email}
  onChange={(event) => setEmail(event.target.value)} 
/>

然后我添加了一段代码,每100ms查找一次该字段的值,并调用setEmail()更新它:

useEffect(() => {
  let interval = setInterval(() => {
    if (emailField.current) {
      setEmail(emailField.current.value)
      //do the same for all autofilled fields
      clearInterval(interval)
    }
  }, 100)
})

这不是很理想,它涉及DOM操作,在使用像React这样的库时,我们应该避免这种操作,但是它可以解决此问题。

如果没有自动填充怎么办?这将简单地等到键入第一个字符,然后停止循环。

免费下载我的反应手册


更多反应教程: