使用 React-Hook-Forms 通过子组件传递方法

Question

我正在尝试在我的子组件中使用 register() 方法。但是我收到一个打字稿错误说：Expected 1-2 arguments, but got 0.

我假设我错误地传递了注册方法？

父组件

type FormValues = {
  projectType: string;
};

const Parent = () => {
  const {
    register,
  } = useForm<FormValues>({ mode: 'all' });
  return (
    <Container>
      <FormBlock id="form">
        <fieldset>
          <ChildComponent props={register()}/>
        </fieldset>
      </FormBlock>
    </Container>
  );
};

子组件

const ChildComponent = ({ props }) => {
  return (
    <InputField {...props.register('projectType')}></InputField
  );
};

Answer 1

您必须将以下行更新为：

<ChildComponent props={register} />

你不应该调用 register，你必须删除括号

编辑： 感谢 Calvin

您必须编辑组件：

<InputField {...props('projectType')}></InputField>

将 props 重命名为 register

更简洁

<ChildComponent register={register} />

// Field
<InputField {...register('projectType')}></InputField>

使用 React-Hook-Forms 通过子组件传递方法

Passing methods through child components using React-Hook-Forms

typescript

reactjs

react-functional-component

react-hook-form