React: Chromeオートフィルは、制御されたコンポーネントの値を上書きします

「バリュー」プロップの場合に発生するようです（例： どのchromeがフィールドのデフォルト値/プレースホルダーと見なされるか）は、フィールドの挿入された値と同じです。 したがって、reactが状態変更時に値propを更新すると、入力内容に一致するようにデフォルト値/プレースホルダーが技術的に変更されます。したがって、chromeはこれを変更されていないフィールドと見なし、自動入力時に上書きします。

例えば。 名フィールドに文字列を入力します... reactは、入力したものに値propを更新します。 メールの自動入力を試してみると、名のフィールドが上書きされます。

ただし、名フィールドに文字列を入力してから、要素を調べて、入力した文字列以外の文字列に名の値のプロパティを編集し、電子メールの自動入力を再試行してください...今回は上書きされません。 。値が「デフォルト」値と同じではないため。

それを回避する別の方法はonChangeで、autocomplete = this.state.valueを更新します。 また、chromeは、何らかの理由でこのフィールドをオートコンプリートしないことを認識します。 （autocomplete = offは機能しません...ランダムな文字列である必要があります）空でthis.state.valueが空の場合でも、オートフィルは期待どおりにフィールドで機能します。

^^そうです。 onChangeの提案を使用した実際の例を次に示します： https ：//jsfiddle.net/epicfaace/9p17e2qx/29/

とても興味深い！ これは、以前は気づかなかった入力の値属性/プロパティを同期することの副作用です（ありがとう、@ mabeabe28）：

value属性がvalueプロパティと同じである場合、Chromeは入力が「変更されていない」と見なし、自動入力アクション中にvalueプロパティを置き換えます。

これは他のブラウザにも当てはまるのだろうか。

自動入力の問題を追跡するバグが必要なようですが、これを文書化したものがあるかどうかはわかりません。 また、ネイティブアプローチとReactアプローチを比較する要点を作成しました。

https://codesandbox.io/s/01zr8pll00

value属性がvalueプロパティと同じである場合、Chromeは入力が「変更されていない」と見なし、自動入力アクション中にvalueプロパティを置き換えます。

これは、＃13525（「値属性への入力値の反映を停止する」）によって少なくとも部分的に解決される可能性があります。