如何将 react-hook-form v7 与 reactstrap 9 一起使用？

Question

我目前正在尝试使用 react 18 创建一个带有 react-hook-form v7和 reactstrap 9 的表单。这是我当前的实现，但在我的控制台日志中，数据返回一个undefined 。 如果你们能告诉我如何正确地整合它们，那将会很有帮助。 非常感谢！

  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    //here, the output is --> {email: undefined, password: undefined}
    console.log("sign in form data", data);
  };

// Sample Form
 <Form inline onSubmit={handleSubmit(onSubmit)}>
      <FormGroup className="mb-2">
        <Label className="auth-label" htmlFor="email">
          Email address*
        </Label>
        <Input
          id="email"
          name="email"
          placeholder=""
          type="email"
          className="auth-input"
          {...register("email")}
        />
      </FormGroup>
      <Button block className="auth-button mt-4">
        Login
      </Button>
 </Form>

Answer 1

尝试按如下方式定义寄存器变量：

const { ref, ...sampleName } = register("name");

并在 Reactstrap Input 中使用这个 ref

<Input innerRef={ref} {...sampleName}/>

请在此处查看沙箱： https://codesandbox.io/s/reactstrap-sandbox-forked-z2uxl?file=/src/index.js:808-842