web-dev-qa-db-fra.com

Réagir ne rend pas l'auto-complétion

Comment puis-je faire réagir le rendre?

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

Capital "C" autoComplete. Ceci est mentionné dans la documentation de React:

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

76
azium

Vous devriez mettre: 

autoComplete="new-password"

Cela supprimera la saisie semi-automatique

27
JpCrow

Si vous avez lu la bonne réponse et que vous rencontrez toujours ce problème (en particulier dans Chrome), bienvenue au club ... alors vérifiez comment je l'ai accompli:

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

Remarques

  • le formulaire n'a pas nécessairement besoin d'être le parent direct de l'élément d'entrée
  • l'entrée a besoin d'un attribut name
  • cela fonctionne aussi avec la balise <FormControl/> de React-Bootstrap (au lieu de <input/>)
5
w3jimmy

Selon Documentation Mozilla , vous devez définir une valeur non valide pour désactiver réellement l'auto-complétion. Dans certains navigateurs, les suggestions de saisie semi-automatique sont toujours données même si l'attribut est désactivé.

Cela a fonctionné pour moi (react-bootstrap):

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

autoComplete = "none" - fonctionne pour moi.

0
Alexander Utrobin

Je l'ai résolu avec une seule ligne:

Si vous utilisez la méthode recommandée avec "changeHandler ()" et l'état des composants, insérez simplement:

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

Plus d'infos sur ce changeHandler () - Thing:
https://reactjs.org/docs/forms.html#controlled-components

0
Marcel Ennix