React-hook-form 表单键值在填写输入并提交后返回 undefined

Question

我正在学习 React，我遇到了一些困难。目前我的问题与使用 ReactJS、Typescript 和样式化组件的登录页面有关。我只有电子邮件和密码部分的地方。我正在使用 React Hook 表单处理表单，但我遇到了问题。当我运行我的电子邮件和密码密钥的值的 console.log 时，它只是返回未定义。并且在控制台中没有指出任何错误。

这是我的代码。

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import { Form, TitleSecondary } from "./Form.style";
import { Button } from "../Button/Button";
import { InputContainer, InputLabel, InputField } from "./Form.style";

interface IForm {
  email: string;
  password: string;
}

export const FormLogin = React.forwardRef<HTMLInputElement>(( props, ref) => {

  const { register, handleSubmit } = useForm<IForm>();

  const onSubmit: SubmitHandler<IForm> = (data) => console.log(data);

  return (
  <Form onSubmit={handleSubmit(onSubmit)}>
    <TitleSecondary>Login</TitleSecondary>
    <InputContainer>
      <InputLabel htmlFor="email">Email</InputLabel>
      <InputField
        {...register("email")}
        id="email"
        type="email"
        placeholder=""
        ref={ref}
        required
      />
    </InputContainer>
    <InputContainer>
      <InputLabel htmlFor="password">Password</InputLabel>
      <InputField
        {...register("password")}
        id="password"
        type="password"
        placeholder="[email protected]"
        ref={ref}
        required
      />
    </InputContainer>
    <Button />
  </Form>
  )
})

Form.style.ts

import styled from "styled-components";

export const Form = styled.form`
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
`;

export const TitleSecondary = styled.h2`
  font-weight: 600;
  font-size: 40px;
  line-height: 47px;
  color: #000000;
`;
export const InputContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`;

export const InputLabel = styled.label`
  font-weight: 600;
  font-size: 20px;
  line-height: 23px;
  color: #000000;
`;

export const InputField = styled.input`
  width: 364px;
  height: 53px;
  background-color: #d9d9d9;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #000000;
  padding: 0 15px;
  font-size: 16px;

  &:hover {
    background-color: #d2cece;
    transition: 0.5s;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1);
  }
  &:focus {
    background-color: #d2cece;
    border: 2px solid #000000;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1);
    transition: 0ms;
  }
`;

export const ValidationError = styled.p`
  color: #bd3131;
`;

Button.tsx

import { ReactEventHandler } from "react";
import { ButtonStyle } from "./Button.style";

export function Button() {
  return (
    <>
      <ButtonStyle type="submit">Continue</ButtonStyle>
    </>
  );
}

Button.style.ts

import styled from "styled-components";

export const ButtonStyle = styled.button`
  width: 364px;
  height: 61px;
  background: #161516;
  border: 1px solid #000000;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;

  &:hover {
    background-color: #464446;
    transition: 0.5s;
  }
  `;

我承认从那以后我尝试了好几件事，但都没有成功。