在 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"，但是chrome 总是根据过去的输入向我显示建议，无论我尝试过哪一种autocomplete="new-password"。还有其他事情发生可能会影响它吗？autoComplete="none"autocomplete="none"

Answer 1

在表单标签中添加 autoComplete="off" 而不是输入标签。下面是要遵循的代码：-

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

{autoComplete} 语法，即 React 的驼峰式命名法，html 遵循小写的 {autocomplete}。JSX 还将其转换为小写。你可以看到渲染后的 DOM。

这是演示：- https://codepen.io/gahlotbaba/pen/JjdzmmB?editors=0111

希望能帮助到你。