Отключить автозаполнение ввода в React. js

Question

Я знаю, что об этом спрашивали 1000 раз, но все ответы говорят одно и то же, но ни коим образом не работают для меня.

Вот мое поле ввода:

  <input
    className={
      required ? "input-field__input input-field__input--required" : "input-field__input"
    }
    id={placeHolder}
    type={type}
    placeholder={placeHolder}
    autoComplete="new-password"
    value={value || ""}
    onChange={e => handleChange(e.target.value)}
  />

Я пытался autoComplete="new-password", autocomplete="new-password", autoComplete="none" & autocomplete="none", но chrome продолжает показывать мне предложения, основанные на прошлых данных, независимо от того, какой я пробовал. Есть ли что-то еще, что может повлиять на это?

Answer 1

Добавьте autoComplete = "off" в тег формы вместо тега ввода. Ниже приведен следующий код: -

  <form autoComplete="off">
          <input id="input" type="text" placeholder="Enter Text" />
  </form>

{autoComplete} синтаксис, т.е. camelCase для React, html follow {autocomplete} в нижнем регистре. JSX также конвертирует его в нижний регистр. Вы можете увидеть визуализированный DOM.

Вот демоверсия: - https://codepen.io/gahlotbaba/pen/JjdzmmB?editors=0111

Надеюсь, это поможет.

Answer 2

вы можете добавить фиктивный невидимый ввод над вашим паролем

    <div style={{ height: 0px; overflow: hidden; background: transparent; }}>
        <input type="password"></input>
    </div>