web-dev-qa-db-ja.com

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

反応レンダリングするにはどうすればよいですか？

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

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

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

97
azium

あなたが置く必要があります：

autoComplete="new-password"

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

37
JpCrow

正しい答えを読んで、まだこの問題がある場合（特にChromeの場合）、クラブにようこそ...ので、私がそれを達成した方法を確認してください。

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

ノート

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

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

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

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

autoComplete = "none"-私のために働く。

0
Alexander Utrobin

私は1行で解決しました：

"changeHandler（）"とコンポーネントの状態で推奨される方法を使用する場合は、次を挿入してください：

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

そのchangeHandler（）-Thingの詳細：
https://reactjs.org/docs/forms.html#controlled-components

0
Marcel Ennix