Reactはオートコンプリートをオフにしません

どのように反応させてレンダリングさせるのですか？

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autocomplete="off"
    {...field}/>

大文字の「C」autoComplete。これはReactのドキュメントに記載されています：

https://facebook.github.io/react/docs/tags-and-attributes.html

あなたは置くべきです：

autoComplete="new-password"

これにより、オートコンプリートが削除されます

Mozillaのドキュメントによると、オートコンプリートを実際にオフにするには、無効な値を設定する必要があります。一部のブラウザでは、属性がオフに設定されていても、オートコンプリートの提案が表示されます。

これは私のために働いた（react-bootstrap）：

<FormControl
  value={this.state.value}
  autoComplete="nope"
  {...props}
/>

正解を読んでもこの問題が発生する場合（特にChromeの場合）、クラブへようこそ...だから私がどのようにそれを達成したかを確認してください：

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

ノート

• フォームは必ずしも入力要素の直接の親である必要はありません
• 入力には名前属性が必要です
• また、React-Bootstrap<FormControl/>タグ（の代わりに<input/>）でも機能します

これらのソリューションはいずれもChrome80では実際には機能しませんでした。

何時間もの試行錯誤の末、この非常に奇妙なハックがうまくいきました。

1. autoComplete="none"それぞれに追加<input>-Googleはautocomplete = "off"をスキップします
2. フィールドをコンテナでラップします：<form>または<div>
3. が付いた有効な入力フィールドが少なくとも1つ必要ですautoComplete="on"。これは、コンテナの最後の要素である必要があります。そこで、フォームの下部に次の入力フィールドを追加しました。

<input 
  type="text" 
  autoComplete="on" 
  value="" 
  style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}} 
  readOnly={true}
/>

autoComplete = "none"-私のために働きます。

Chromeのオートコンプリート地獄は、new-password属性を追加することでオフになります。

autoComplete="new-password"

実際には次のようになります。

<input            
type="password"
autoComplete="new-password"
/>

に関する詳細：

Chromeオートコンプリートディスカッション

@aziumの回答に加えて<input>、<form>タグ内に配置する必要があり、その後autoComplete機能します

私はたった1行でそれを解決しました：

「changeHandler（）」とコンポーネントの状態で推奨される方法を使用する場合は、次を挿入するだけです。

changeHandler = (e) => {    
  if (!e.isTrusted) return;
  ... your code
}

そのchangeHandler（）に関する詳細情報-事：https：//reactjs.org/docs/forms.html#managed-components

私も多くのオプションを試しましたが、結局、<form>タグを<div>タグに置き換えて、そのフォームでの各入力を手動で管理することになりました。

これが「私のマシンで動作する」です

Chromeバージョン83.0.4103.116およびReact。私にとってうまくいったトリックは、フォーム内に配置してオートコンプリート属性を追加することのようです。注意これを非反応アプリで試す場合は、小文字のCでオートコンプリートを実行する必要があります

 <form autoComplete="off">
      <input type="text" autoComplete="new-password" />
 </form>

そして

<form autoComplete="new-password">
  <input type="text" autoComplete="new-password" />
</form>

ここや他の場所での提案のほとんどは2020年12月に失敗しました。フォームラッパーで、オートコンプリートを「newpassword」の「オフ」に設定し（どちらも機能しません）、onFocusを使用して、オートコンプリートではなくオートコンプリートを使用するようにしました。 （大文字ではありません）が、どれも役に立ちませんでした。

結局、mscott2005のアプローチは私にとってはうまくいきました（+1）が、他の人への回答として投稿しているより最小限の例のためにそれを微調整しました：

フォームは必要ありません。2つの入力タグだけが必要です。

• autocomplete = "off" 希望のフィールドに

  <input ... autoComplete="off" />

• autocomplete = "on" 偽の隠されたフィールドに

  <input

  id="fake-hidden-input-to-stop-google-address-lookup"
  autoComplete="on"
  style={{ display: 'none'}}>
  

IDは、コメントを使用せずに実際にハッキングされているものを文書化するために私が持っている最高のものです。