react-hook-form粘贴值后校验失效，非空输入仍报必填项错误

你遇到的校验异常核心是两次重置操作导致react-hook-form内部状态和DOM实际值不同步：

• 提交回调中同时调用了原生表单e.target.reset()和react-hook-form提供的reset()方法，两次重置逻辑冲突，使得表单值的内部缓存和输入框实际展示值不一致，粘贴内容后没有触发正确的状态同步，就会出现有值仍报必填错误的情况。
• 另外存在两个隐性bug也可能引发异常：
  • 调用InputContainer时未传递type、labelRequired两个属性，组件属性不匹配
  • 复选框注册时写死了字段名medium，没有使用配置项的name字段

1. 移除重复的重置逻辑 #

修改提交回调函数，删除原生表单重置操作，仅保留react-hook-form的reset()即可，react-hook-form会自动同步DOM值和内部状态：

const submitHandler = (data, e) => {
  // 删掉e.target.reset()这行代码
  console.log(data);
  reset();
};

2. 补全InputContainer传递的属性 #

遍历生成表单项时，补全缺失的属性：

<InputContainer
  key={item.id}
  // 新增下面两个属性
  type={item.type}
  labelRequired={item.labelRequired}
  register={{
    ...register(item.name, {
      required: item.validation.required,
      minLength: item.validation.minLength,
    }),
  }}
  validation={item.validation}
  placeholder={item.placeholder}
  label={item.label}
  size={item.size}
  error={errors[item.name]}
/>

3. 修复复选框字段名注册问题 #

将复选框的注册字段名改为动态读取配置项的name值，避免后续提交时取值异常：

<CheckBoxContainer
  key={item.id}
  label={item.label}
  data={item.data}
  // 把原来的"medium"改成item.name
  register={{ ...register(item.name, { required: true }) }}
  // error也同步修改为读取对应字段的错误信息
  error={errors[item.name]}
/>

修复完成后重新运行测试即可解决粘贴后校验异常的问题。

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