在進行一個項目時,我遇到了一個問題,這個項目是使用 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 完全運行之前就填寫了該字段,所以無法截取該事件。
我進行了一些研究,不同瀏覽器的不一致性和自動填充工作方式的差異讓我感到困惑,因此我不得不創建一個簡單的解決方案。
我使用了 useRef
和 useEffect
來實現它:
import { useState, useEffect, useRef } from 'react'
我創建了一個 ref:
const emailField = useRef(null)
並將它附加到 JSX 的輸入字段上:
<input
ref={emailField}
id='email'
type='email'
name='email'
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
然後,我添加了一段代碼,每 100 毫秒查找字段的值,並調用 setEmail()
更新它:
useEffect(() => {
let interval = setInterval(() => {
if (emailField.current) {
setEmail(emailField.current.value)
// 對所有自動填寫的字段進行相同的處理
clearInterval(interval)
}
}, 100)
})
這並不是理想的解決方案,它涉及到 DOM 操作,而在使用 React 這樣的庫時我們應該避免使用 DOM 操作,但它可以解決這個問題。
如果沒有自動填充,這個解決方案只會等到輸入第一個字符時才停止循環。