Question

无法在子组件中进行错误验证。我看过multistep tutorial video，但我认为它是最新版本的过时（也许我错了）。

我有一个父组件，我在其中实例化了方法，它包含一个字段和一个组件：

const OD= () => {
    const methods = useForm();
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = methods;

    return (
        <FormProvider {...methods} >
           <Field>
              <Label>Complaint:<span className="mandatory">*</span></Label>
              <Textarea {...register("Complaint", { required: true })}/>                  
              {errors.Complaint && <RequiredMessage/>}
           </Field> 
           <Allergens />
        </FormProvider>
    )
}

在我的组件中，我有以下内容：

const Allergens = () => {
    const { register, formState: { errors } } = useFormContext();
    return(
        <Label>Allergy<span className="mandatory">*</span></Label>
        <Input {...register("Allergy")} />
        {errors.Allergy&& <RequiredMessage/>}
    )
}

寄存器工作正常，我可以看到它从父组件和子组件收集数据，错误在父组件上工作正常，但在子组件（过敏原）上不起作用。

我没有语法错误，有什么我遗漏的吗？

谢谢！

Answer 1

我认为这是一个错误。在 Allergens 组件输入中，您注册了 {...register(("Allergy"))} 之类的输入。您使用了双括号，删除其中之一。实际需要的是{...register("Allergy")}。

React hook 表单将错误传递给子组件 (TS)

1 个答案: