React项目中Chrome表单自动填充信息无法清除如何处理？

一、前端代码层面禁用自动填充 #

可以通过以下几种方式阻止浏览器对表单的自动填充：

• 给表单或输入元素添加autocomplete属性
  直接在表单或单个输入框上设置autocomplete="off"，密码框可使用autocomplete="new-password"绕过浏览器的密码自动填充逻辑：

  <form autocomplete="off">
    <input type="email" name="user-email" autocomplete="off" placeholder="邮箱" />
    <input type="password" name="user-password" autocomplete="new-password" placeholder="密码" />
  </form>
  

• 动态切换输入框类型
  初始将密码框设为text类型，聚焦后切换为password，避免Chrome识别为密码字段：

  import { useState } from 'react';
  
  function LoginForm() {
    const [pwdType, setPwdType] = useState('text');
  
    return (
      <input
        type={pwdType}
        onFocus={() => setPwdType('password')}
        onBlur={() => setPwdType('text')}
        autocomplete="off"
        placeholder="密码"
      />
    );
  }
  

• 使用随机字段名
  每次渲染时给输入框生成随机的name和id，让浏览器无法匹配已保存的字段：

  function RegisterForm() {
    const randomFieldName = `form-field-${Math.random().toString(36).substring(2, 10)}`;
  
    return (
      <input
        type="email"
        name={randomFieldName}
        id={randomFieldName}
        autocomplete="off"
        placeholder="邮箱"
      />
    );
  }
  

二、Chrome浏览器端彻底清除已保存数据 #

如果删除过数据仍出现自动填充，按以下步骤操作：

• 打开Chrome，在地址栏输入chrome://settings/进入设置页面
• 点击「隐私和安全性」→「自动填充」→「密码管理」
• 在搜索框输入本地网站域名（比如localhost:3000），找到对应保存条目后点击右侧删除按钮
• 若要彻底禁止该网站自动填充，可在密码管理页面的「设置」中关闭「自动保存密码」，或把该网站添加到「从不保存密码」列表

内容的提问来源于stack exchange，提问作者Vilayat Safarov