React未检测输入框已填写，本地表单验证异常求助

问题描述 #

我用React Hook Form实现了带必填字段的表单，预期行为是字段为空时提交按钮未激活，输入内容后按钮正常激活。但现在遇到了仅本地环境出现的异常：

• 团队成员运行同一GitHub分支代码、依赖版本完全一致，输入内容后按钮可正常激活
• 我本地所有页面都出现问题：输入内容后，表单仍判定字段为空，按钮保持未激活状态
• 临时给useForm添加{ mode: 'onChange' }配置可修复，但不想仅为本地环境修改代码

代码片段：

const {
    control,
    formState: { isValid, isDirty, errors },
    handleSubmit,
    reset,
    register,
    setError,
  } = useForm();

const onSubmit = async form =>
    mutation.mutate({
      ...form,
      id: state.data.id,
      esn: Number(form.esn),
    });

<Controller
        render={({ field: { onChange, value } }) => (
          <Select
            defaultValue={value}
            title={language.trackerModelId}
            setValue={onChange}
            placeholder={language.trackerModelIdPlaceholder}
            options={trackerModelData}
            filterable
          />
        )}
        name="trackerModelId"
        control={control}
        rules={{ required: true }}
      />
      <Input
        title={language.esn}
        name="esn"
        register={register}
        error={errors.esn?.message}
        onChange={handleValidateESN}
        required
        upperCase
      />

排查与解决方案 #

1. 清理浏览器表单缓存/自动填充 #

浏览器自动填充字段但未触发表单状态更新，可能导致Hook Form认为字段仍为空：

• 清空当前页面的表单缓存：Chrome设置→隐私和安全→清除浏览数据→勾选「密码」「自动填充表单数据」，时间范围选「今天」
• 给表单字段添加autoComplete="off"属性，禁用自动填充
• 手动刷新页面后重新测试，不要依赖浏览器自动填充

2. 清除本地开发环境缓存 #

本地构建工具（Webpack/Vite等）的缓存可能导致代码未生效：

• 执行强制清理缓存的构建命令，比如npm run build -- --clean（根据你的构建工具调整）
• 清除浏览器LocalStorage/SessionStorage：开发者工具→Application→Storage→右键LocalStorage→Clear
• 重启开发服务器，避免热更新缓存残留

3. 修复自定义Input的状态同步逻辑 #

自定义onChange={handleValidateESN}可能覆盖了register的默认事件，导致表单状态未同步：

• 在handleValidateESN内部调用register返回的onChange方法：

  const handleValidateESN = (e) => {
    // 你的ESN验证逻辑
    register('esn').onChange(e); // 触发Hook Form的状态更新
  };
  

• 或者改用Controller包裹Input，和Select保持一致写法：

  <Controller
    render={({ field: { onChange, value, ref }, fieldState: { error } }) => (
      <Input
        title={language.esn}
        value={value}
        onChange={(e) => {
          handleValidateESN(e);
          onChange(e);
        }}
        ref={ref}
        error={error?.message}
        required
        upperCase
      />
    )}
    name="esn"
    control={control}
    rules={{ required: true }}
  />
  

4. 手动触发字段的touched状态 #

Hook Form默认验证模式是onSubmit，isValid仅在字段被标记为touched后才会更新，本地可能存在字段未触发touched的情况：

• 给Input添加onBlur事件，手动触发touched状态：

  <Input
    // ...其他props
    onBlur={register('esn').onBlur}
  />
  

5. 排查浏览器扩展干扰 #

部分浏览器扩展（广告拦截、表单增强工具）可能干扰表单事件：

• 用无痕模式打开页面测试，看问题是否消失
• 禁用所有扩展，逐个排查冲突来源

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