如何阻止React Hook Forms自动预填充表单数据？

• 禁用浏览器自动填充
  直接给表单和输入控件加上autocomplete属性，大部分场景下能解决问题。注意要同时给<form>标签和单个输入框设置：

  <form autocomplete="off">
    <input 
      {...register('email')} 
      type="email" 
      autocomplete="off"
    />
    {/* 密码框用new-password更稳妥，避免浏览器自动填充旧密码 */}
    <input 
      {...register('password')} 
      type="password" 
      autocomplete="new-password"
    />
  </form>
  

  部分浏览器对autocomplete="off"的支持有限，针对密码字段用new-password会更有效。

• 设置明确的默认空值
  在初始化useForm时，给defaultValues设置所有字段为空字符串，强制表单初始状态为空，覆盖浏览器的自动填充：

  const { register, handleSubmit } = useForm({
    defaultValues: {
      email: '',
      password: '',
      username: ''
    }
  });
  

• 组件挂载后手动重置表单
  如果上面的方法没起作用，在组件挂载完成后调用reset方法强制清空表单：

  import { useEffect } from 'react';
  import { useForm } from 'react-hook-form';
  
  function RegisterForm() {
    const { register, handleSubmit, reset } = useForm();
  
    useEffect(() => {
      // 组件加载完成后重置表单
      reset({
        email: '',
        password: ''
      });
    }, [reset]);
  
    // 表单提交逻辑...
    const onSubmit = (data) => {
      console.log(data);
    };
  
    return (
      <form onSubmit={handleSubmit(onSubmit)} autocomplete="off">
        {/* 输入框组件 */}
      </form>
    );
  }
  

• 极端情况：动态修改输入框name属性
  要是前面的方法都失效，可以试试给输入框的name加随机后缀，让浏览器无法匹配缓存数据。不过这种方法不推荐，会增加表单维护成本，仅作为最后手段：

  const randomKey = Math.random().toString(36).substring(2);
  <input 
    {...register(`email_${randomKey}`)} 
    type="email" 
    name={`email_${randomKey}`}
    autocomplete="off"
  />
  

内容的提问来源于stack exchange，提问作者Mike M