我如何解決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這樣的庫時,我們應該避免這種操作,但是它可以解決此問題。

如果沒有自動填充怎麼辦?這將簡單地等到鍵入第一個字符,然後停止循環。

免費下載我的反應手冊


更多反應教程: