React不会渲染自动完成功能

我该如何使它渲染？

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

大写字母“ C” autoComplete。在React文档中提到了这一点：

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

您应该输入：

autoComplete="new-password"

这将删除自动完成功能

根据Mozilla文档，必须设置一个无效值才能真正关闭自动补全功能。在某些浏览器中，即使该属性设置为off，仍会给出自动完成建议。

这对我有用（react-bootstrap）：

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

如果您已阅读正确答案，但仍然遇到此问题（尤其是在Chrome中），欢迎加入俱乐部...因此，请检查我是如何做到的：

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

笔记

• 形式不一定是输入元素的直接父代
• 输入需要名称属性
• 它也可以与React-Bootstrap<FormControl/>标签一起使用（而不是<input/>）

autoComplete =“ none”-为我工作。

这些解决方案都无法在Chrome 80上真正起作用。

经过数小时的反复试验，这个非常奇怪的技巧对我有用：

1. 添加autoComplete="none"到每个<input>-Google现在跳过autocomplete =“ off”
2. 将您的字段包装在容器中：<form>或<div>
3. 您需要至少一个有效的输入字段autoComplete="on"。这应该是容器中的最后一个元素。因此，我在表单底部添加了以下输入字段：

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

Chrome自动完成功能会通过添加new-password属性来关闭。

autoComplete="new-password"

实际操作如下：

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

有关以下内容的更多讨论：

Chrome自动完成讨论

除了@azium的答案外，<input>还应将其放在<form>标签中，然后autoComplete可以使用

我只用一行就解决了：

如果您对“ changeHandler（）”和组件状态使用推荐的方式，只需插入：

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

有关该changeHandler（）的更多信息-内容：https ://reactjs.org/docs/forms.html#受控组件

我还尝试了许多选项，但最终要做的是<form>用<div>标签替换标签，并手动管理该表单中的每个输入。

这是“它可以在我的机器上运行”

Chrome版本83.0.4103.116和React。看来对我有用的技巧是将其放入表单中并添加autoComplete属性。注意如果在非反应性应用程序上尝试此操作，则必须使用小写C来自动完成

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

和

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