使用 React Hook 的表单显示自定义输入组件字段未定义

Question

    <div className="App">
        <div>
            <form
                onSubmit={handleSubmit((data) => {
                    console.log(data);
                })}
                className="hey"
            >
                <h2>Log in</h2>
                <Input
                    style="input"
                    placeholder="Email"
                    type="email"
                    {...register("Email")}
                />
                <Input
                    style="input"
                    placeholder="Password"
                    type="password"
                    {...register("Password")}
                />
                <Button style="button neon-transparent" type="submit" name="Log In" />
            </form>
        </div>
    </div>

我目前正在尝试使用 React Hooks 表单库创建表单，当我单击此表单上的“提交”时，表单的对象会被控制台记录下来，但是当值已被设置时，这两个字段显示为未定义投入各个领域。我知道这很可能是自定义组件的问题，因为当我使用传统输入字段创建表单时它没有问题。

我是这个库的新手，如果有人知道如何将这个库与自定义组件一起使用，我将不胜感激。

这也是输入组件：

    type InputProps = {
    type: string,
    placeholder?: string,
    style: string
}

export const Input = (props: InputProps) => {
  return (
    <input className={props.style} type={props.type} placeholder={props.placeholder} />
  )
}

Answer 1

将您的输入组件更改为以下内容：

export const Input = (props: InputProps) => {
   const {style, type, placeholder, ...others} = props;
   return (
        <input className={style} type={type} placeholder={placeholder} {...others} />
   );
}

使用 React Hook 的表单显示自定义输入组件字段未定义

Form Using React Hook Forms showing undefined for Custom Input Component Fields

reactjs

react-hooks

react-hook-form

react-forms