React macht die automatische Vervollständigung nicht deaktiviert

Wie kann ich reagieren lassen, um es zu rendern?

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

Großbuchstabe "C" autoComplete. Dies wird in der React-Dokumentation erwähnt:

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

Sie sollten setzen:

autoComplete="new-password"

Dadurch wird die automatische Vervollständigung entfernt

Laut Mozilla-Dokumentation müssen Sie einen ungültigen Wert festlegen, um die automatische Vervollständigung wirklich auszuschalten. In einigen Browsern werden weiterhin Vorschläge zur automatischen Vervollständigung gegeben, obwohl das Attribut deaktiviert ist.

Das hat bei mir funktioniert (React-Bootstrap):

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

Wenn Sie die richtige Antwort gelesen haben und dieses Problem weiterhin haben (insbesondere in Chrome), heißen wir Sie im Club willkommen. Überprüfen Sie also, wie ich es erreicht habe:

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

Anmerkungen

• form muss nicht unbedingt das direkte übergeordnete Element des Eingabeelements sein
• Eingabe benötigt ein Namensattribut
• es funktioniert auch mit React-Bootstrap- <FormControl/>Tag (anstelle von <input/>)

autoComplete = "none" - funktioniert bei mir.

Keine dieser Lösungen funktionierte wirklich auf Chrome 80.

Nach stundenlangem Ausprobieren hat dieser sehr seltsame Hack für mich funktioniert:

1. In autoComplete="none"die jedem <input>- Google überspringt die automatische Vervollständigung = „off“ jetzt
2. Wickeln Sie Ihre Felder in einen Container: <form>oder<div>
3. Sie benötigen mindestens ein gültiges Eingabefeld mit autoComplete="on". Dies sollte das letzte Element im Container sein. Deshalb habe ich das folgende Eingabefeld am Ende meines Formulars hinzugefügt:

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

Die Hölle der automatischen Vervollständigung von Chrome wird durch Hinzufügen eines neuen Kennwortattributs deaktiviert.

autoComplete="new-password"

In Aktion sieht es so aus:

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

Weitere Diskussion über:

Chrome AutoComplete-Diskussion

Zusätzlich zur Antwort von @ azium <input>sollte in das <form>Tag eingefügt werden , dann autoCompletefunktioniert

Ich habe es mit nur einer Zeile gelöst:

Wenn Sie die empfohlene Methode mit "changeHandler ()" und dem Komponentenstatus verwenden, fügen Sie einfach Folgendes ein:

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

Weitere Informationen zu dieser ÄnderungHandler () - Sache:
https://reactjs.org/docs/forms.html#controlled-components

Ich habe auch viele Optionen ausprobiert, aber am Ende habe ich das <form>Tag durch ein <div>Tag ersetzt und jede Eingabe, die ich in diesem Formular hatte, manuell verwaltet.

Hier ist das "Es funktioniert auf meinem Computer"

Chrome Version 83.0.4103.116 und Reagieren. Der Trick, der bei mir funktioniert hat, besteht darin, ihn in ein Formular einzufügen und das Attribut autoComplete hinzuzufügen . Hinweis Wenn Sie dies in einer nicht reagierenden App versuchen, müssen Sie die automatische Vervollständigung mit einem Kleinbuchstaben C durchführen

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

und

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