在 React.js 上禁用输入自动完成答案

【问题标题】：Disable input auto complete on React.js在 React.js 上禁用输入自动完成
【发布时间】：2020-07-13 02:46:44
【问题描述】：

我知道这已经被问了 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 都会根据过去的输入向我显示建议。是否还有其他可能影响它的事情发生？

【问题讨论】：

stackoverflow.com/questions/15738259/disabling-chrome-autofill 的可能重复项
没有任何效果。尝试通过提供当前时间戳（以毫秒为单位）来为该自动完成字段生成唯一输入，但仍会自动完成。

标签： javascript reactjs forms

【解决方案1】：

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

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

{autoComplete} 语法，即 React 的 camelCase，html 跟随 {autocomplete} 小写。 JSX 也将其转换为小写。你可以看到渲染的 DOM。

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

希望对你有帮助。

【讨论】：

天哪，谢谢。简单地在中设置 autoComplete="off" 或 autoComplete="new-password" 不再起作用，我一时失去理智

【解决方案2】：

您可以在密码上方添加一个虚拟的不可见输入

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

【讨论】：

【解决方案3】：

autoComplete="new-password" 应该适合你。

这将删除自动完成

【讨论】：