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が完全に実行される前にフィールドがいっぱいになるためか、そのイベントをインターセプトできない可能性があります。

私は少し調べて、ブラウザの不整合と自動入力の動作の違いの土地に迷い込んだので、簡単な回避策を作成する必要がありました。

私はそれを使ってやった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)
      //do the same for all autofilled fields
      clearInterval(interval)
    }
  }, 100)
})

これは理想的ではありません。Reactのようなライブラリを使用する場合は避けるべきDOM操作が含まれますが、この問題は回避されます。

自動入力がない場合はどうなりますか?これは、最初の文字が入力されるまで待機し、ループを停止します。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: