使用react-hook-form做多组件表单校验时报表单未连接错误如何解决

错误根因说明 #

• 控制台抛出form submission canceled because the form is not connected react错误，是因为提交逻辑未和useForm生成的表单实例正确绑定，React触发提交时无法匹配到对应的已挂载表单节点。
• 输入项校验未生效，是因为子组件未从全局FormProvider中获取表单上下文，输入项的校验规则没有绑定到register方法的配置中。

具体修复步骤 #

1. 调整Form组件逻辑，保留原有onClick={makeContract}配置 #

无需修改提交按钮的onClick绑定，只需要在makeContract方法内部嵌入useForm的校验触发逻辑即可
Form.js 核心代码调整如下：

import { useForm, FormProvider } from 'react-hook-form'
// 其他组件导入省略

const Form = () => {
  const methods = useForm()
  const { handleSubmit } = methods

  const makeContract = () => {
    // 先触发全局表单校验，校验通过后再执行原有业务逻辑
    handleSubmit((validatedData) => {
      // 此处放置你原来的makeContract业务逻辑，validatedData为校验通过的全量表单数据
      console.log('表单校验通过，数据：', validatedData)
    })()
  }

  return (
    <FormProvider {...methods}>
      {/* 正常挂载form标签，不需要额外加onSubmit属性 */}
      <form>
        {/* 你的各个表单项组件，比如姓名输入组件 */}
        <NameInput />
        {/* 其他表单组件省略 */}
        <button type="button" onClick={makeContract}>提交</button>
      </form>
    </FormProvider>
  )
}

2. 子输入组件绑定单个校验规则和错误提示 #

在单个输入组件内部从表单上下文中获取register和错误状态，绑定对应校验规则：

import { useFormContext } from 'react-hook-form'

const NameInput = () => {
  const { register, formState: { errors } } = useFormContext()
  return (
    <div className="form-item">
      <label>姓名</label>
      <input 
        type="text"
        {/* 此处第二个参数配置当前输入项的独立校验规则 */}
        {...register('name', {
          required: '请输入姓名',
          minLength: {
            value: 2,
            message: '姓名不能少于2个字符'
          }
        })}
      />
      {/* 校验不通过时显示对应错误提示 */}
      {errors.name && <span className="error-text">{errors.name.message}</span>}
    </div>
  )
}

效果验证 #

• 未输入姓名直接点击提交按钮，会自动触发校验，姓名输入项下方显示对应错误提示
• 输入符合规则的内容后点击提交，校验通过后会正常执行makeContract内的原有业务逻辑

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