使用 reactstrap 从 react-hook-form 访问错误

Question

我创建了一个带有 reactstrap 和 react-hook-form 的表单。 为什么我的错误没有显示？

呈现文本输入的虚拟部分：

function DummySection() {
  const { control } = useForm();
  return (
    <div>
      <Controller
        name="dummyName"
        control={control}
        rules={{ required: true }}
        defaultValue=""
        render={({ field: { onChange, ref }, fieldState: { error } }) => (
          <TextInput onChange={onChange} innerRef={ref} error={error} />
        )}
      />
    </div>
  );
}

文本输入错误：

function TextInput({ onChange, value, innerRef, error }) {
  const updateText = (e) => {
    onChange(e);
    // do something else below
  };
  return (
    <div>
      <Input
        name="dummyName"
        type="text"
        onChange={(e) => updateText(e)}
        value={value}
        innerRef={innerRef}
      />
      {error && "Cannot be blank"}
    </div>
  );
}

提交按钮

function SubmitBtn() {
  const { handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return <Button onClick={() => handleSubmit(onSubmit)()}>Submit</Button>;
}

谢谢。

代码沙盒

Answer 1

@jamfie，您为每个组件使用不同的useForm 。

您的表单需要具有相同的实例，您可以通过使用useformcontext或将 props 传递给组件来实现。

此外，你不需要控制器来做这件事，这里是代码和框展示了如何使用 reactstrap 和 react-hook-form。

您也可以在 github 问题中关注此答案。