如何防止 React antd 中的自动填充？答案

【问题标题】：How to prevent autofilll in Ract antd?如何防止 React antd 中的自动填充？
【发布时间】：2020-12-10 08:19:06
【问题描述】：

我在我的 React 应用程序中使用 Ant Design Forms。我想阻止浏览器的凭据管理器自动填充密码。添加 DOM 属性 autocomplete="off" 对我不起作用。我还尝试按照React Doc 中的说明将其添加到camelCase 中，但没有运气！

<Form.Item label="New Password" name={["new"]}>
      <Input.Password autoComplete="off" placeholder="Please enter new password" />
</Form.Item>

我只想知道如何在我的 React 应用程序中使用 Ant Design Forms 防止自动填充。

【问题讨论】：

你的组件 Input 支持 autoComplete 标志吗？
根据本页ant.design/components/input 没有。它没有说明 autoComplete 标志。

标签： javascript reactjs antd

【解决方案1】：

您需要将属性 autoComplete="off" 放在 form.item 中，而不是输入中

<Form.Item 
   label="New Password" 
   autoComplete="off"
   name={["new"]}>
  <Input.Password  placeholder="Please enter new password" />

编辑：防止 Chrome 仍然自动填充用户和电子邮件的另一个选项，它像这样传递 autoComplete 道具：

   <Input
      type="email"
      autoComplete="new-user"
      style={{ maxWidth:300}}
    />

    <Input.Password
      style={{ maxWidth: 300 }}
      autoComplete="new-password"
    />

这种解决方法确实可以防止 chrome 出现奇怪的行为

【讨论】：