React不会渲染自动完成功能

Question

我如何做出反应渲染呢？

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

Answer 1

资本"C" autoComplete.这在React文档中提到:

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

Answer 2

你应该把:

autoComplete="new-password"

这将删除自动完成功能

Answer 3

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

这对我有用（反应引导）：

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

Answer 4

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

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

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

和

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

Answer 5

这里和其他地方的大多数建议在 2020 年 12 月都失败了。我想我尝试了所有这些：表单包装器，将自动完成设置为off或newpassword（都不起作用），使用 onFocus，确保我autoComplete在 React 中使用而不是autocomplete，但它们都没有帮助。

最后，mscott2005 的方法对我有用（+1），但我也对其进行了调整，以获得一个更简单的示例，我将其作为其他人的答案发布：

不需要表单，只需要两个输入标签：

• autocomplete="off"对于所需的字段：

  <input autoComplete="off" />
  

• autocomplete="on"对于假隐藏字段：

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

id 是我在不使用注释的情况下记录真正的黑客攻击的最好方法。

Answer 6

这些解决方案都没有真正适用于 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}
/>

Answer 7

如果你已经阅读了正确的答案并且仍然存在这个问题(特别是在Chrome中),欢迎来到俱乐部...所以请检查我是如何完成它的:

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

笔记

• form不一定需要是input元素的直接父元素
• 输入需要名称属性
• 它也适用于React-Bootstrap <FormControl/>标签(而不是<input/>)

Answer 8

autoComplete="none" - 对我有用。