使用嵌套的自定义复选框组件进行 React Hook 表单验证

Question

我正在使用 React Hook 表单。我制作了一个自定义复选框，如下所示：

const Checkbox = ({ text, className, setCheckbox, checkbox }) => {
  const { register } = useFormContext();
  const statute = register("statute");
  return (
    <Wrapper className={className}>
      <StyledLabel>
        <div>{text}</div>
        <StyledInput
          type="checkbox"
          name="statute"
          onChange={(e) => {
            statute.onChange(e);
            setCheckbox && setCheckbox(!checkbox);
          }}
        />
        <Checkmark />
      </StyledLabel>
    </Wrapper>
  );
};

复选框 (Checkbox.js) 嵌套在父组件 (Register.js) 中：

const Register = ({ setRegisterView }) => {
  const validationSchema = Yup.object().shape({
    statute: Yup.bool().oneOf([true], "You need to accept the page statute."),
  });

  const methods = useForm({
    mode: "onSubmit",
    resolver: yupResolver(validationSchema),
  });

  const {
    register: validate,
    formState: { errors },
    handleSubmit,
  } = methods;

  return (
    <Wrapper>
      <FormProvider {...methods}>
        <Form onSubmit={handleSubmit(registerProcess)}>
          <StyledCheckbox
            text="Accept the page statute."
            setCheckbox={null}
            checkbox={null}
          />
          {errors.statute && <Error>{errors.statute.message}</Error>}
          <LoginButton type="submit">SIGN UP</LoginButton>
        </Form>
      </FormProvider>
    </Wrapper>
  );
};

export default Register;

问题是，当我选中复选框时，我在 errors.statute.message 中得到了一条信息：statute must be a `boolean` type, but the final value was: `"on"`.。

当我改变这个时：

onChange={(e) => {
            statute.onChange(e);
            setCheckbox && setCheckbox(!checkbox);
          }}

对此：

{...register("statute")}

然后它工作得很好并且 errors.statute.message 显示正确的消息，当在复选框输入中选中 = false 时。但是我需要有扩展版本的onChange。

Answer 1

问题是，您没有 link returned ref register 调用您的 <StyledInput />。所以只需传播 register 的 return 值——在下面的代码示例中，我还省略了 name 属性，因为它包含在 statute 中。 Here 你可以找到所有道具 register 将 return.

<StyledInput
  type="checkbox"
  {...statute}
  onChange={e => {
    statute.onChange(e);
    setCheckbox && setCheckbox(!checkbox);
  }}
/>

使用嵌套的自定义复选框组件进行 React Hook 表单验证

React Hook Form validation using nested custom checkbox component

javascript

forms

reactjs

react-hook-form