使用 React-Hook-Forms 通過子組件傳遞方法

Question

我正在嘗試在我的子組件中使用register()方法。 但是我收到一個打字稿錯誤說： Expected 1-2 arguments, but got 0.

我假設我錯誤地傳遞了 register 方法？

父組件

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 ，你必須刪除括號

編輯：感謝卡爾文

您必須編輯組件：

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

重命名props來register更干凈

<ChildComponent register={register} />

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