React nie wyłącza autouzupełniania

Jak sprawić, by zareagował, wyrenderuj to?

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

Wielkie „C” autoComplete. Jest to wspomniane w dokumentacji Reacta:

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

Powinieneś umieścić:

autoComplete="new-password"

Spowoduje to usunięcie autouzupełniania

Zgodnie z dokumentacją Mozilli , musisz ustawić nieprawidłową wartość, aby naprawdę wyłączyć autouzupełnianie. W niektórych przeglądarkach sugestie autouzupełniania są nadal podawane, mimo że atrybut jest wyłączony.

To zadziałało dla mnie (reakcja-bootstrap):

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

Jeśli przeczytałeś poprawną odpowiedź i nadal masz ten problem (szczególnie w Chrome), witaj w klubie ... więc sprawdź, jak to zrobiłem:

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

Uwagi

• forma niekoniecznie musi być bezpośrednim rodzicem elementu wejściowego
• wejście wymaga atrybutu nazwy
• działa również z <FormControl/>tagiem React-Bootstrap (zamiast <input/>)

Żadne z tych rozwiązań tak naprawdę nie działało na Chrome 80.

Po godzinach prób i błędów ten bardzo dziwny hack zadziałał dla mnie:

1. Dodaj autoComplete="none"do każdego<input> - Google pomija teraz autocomplete = "off"
2. Owiń pola w kontenerze: <form>lub<div>
3. Potrzebujesz co najmniej jednego prawidłowego pola wejściowego z autoComplete="on". Powinien to być ostatni element w kontenerze. Więc dodałem następujące pole wejściowe na dole mojego formularza:

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

autoComplete = "none" - działa dla mnie.

Piekło autouzupełniania Chrome wyłącza się przez dodanie atrybutu nowego hasła.

autoComplete="new-password"

W akcji wygląda tak:

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

więcej dyskusji na temat:

Dyskusja dotycząca autouzupełniania Chrome

Oprócz odpowiedzi @ azium <input>należy umieścić w <form>tagu, a następnie autoCompletedziała

Rozwiązałem to za pomocą tylko jednej linii:

Jeśli używasz zalecanego sposobu z "changeHandler ()" i stanem komponentów, po prostu wstaw:

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

Więcej informacji o tej zmianieHandler () - Rzecz:
https://reactjs.org/docs/forms.html#controlled-components

Wypróbowałem także wiele opcji, ale skończyło się na tym, że zastąpiłem <form>tag <div>tagiem i ręcznie zarządzałem każdym wejściem, które miałem w tej formie.

Oto komunikat „To działa na moim komputerze”

Chrome w wersji 83.0.4103.116 i React. Wygląda na to, że sztuczka, która zadziałała w moim przypadku, polega na umieszczeniu go w formularzu i dodaniu atrybutu autoComplete . Uwaga Jeśli spróbujesz tego w aplikacji niereagującej, będziesz musiał wykonać autouzupełnianie małą literą C

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

i

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

Tak, większość sugestii tutaj i gdzie indziej nie powiodła się w grudniu 2020 r.
Myślę, że wypróbowałem je wszystkie, opakowanie formularzy, ustawienie autouzupełniania na „wyłączone” z „nowego hasła” (żadne z nich nie działało), wybranie onFocus, upewnienie się, że używam autouzupełniania i nie autouzupełnianie (nie wielkie litery), ale żadne z nich nie pomogło.

W końcu podejście mscott2005 zadziałało (+1) dla mnie, ale poprawiłem je również, aby uzyskać bardziej minimalny przykład, który publikuję jako odpowiedź dla innych:

Nie był potrzebny żaden formularz, tylko dwa znaczniki wejściowe:

• autocomplete = "off" na wybranym polu

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

• autocomplete = "on" na fałszywym ukrytym polu

  <input

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

Identyfikator jest najlepszym, jaki mam, do dokumentowania tego, co naprawdę jest włamaniem, bez użycia komentarza.