reactjs - 带有 React 钩子(Hook)表单的 Antd 表单

Question

我正在尝试将 antd 表单与 react-hook-form 一起使用，但无法使其正常工作。
基本上我在 antd 中使用一个主题，并希望集成 react-hook-form 以进行更好的验证和其他事情。到目前为止，这是代码

import { Button, Form, Input, Message, Row, Tooltip } from "antd";
import { useForm, Controller } from "react-hook-form";
import {
  EyeTwoTone,
  MailTwoTone,
  PlaySquareTwoTone,
  QuestionCircleTwoTone,
  SkinTwoTone,
} from "@ant-design/icons";
import Link from "next/link";
import Router from "next/router";
import styled from "styled-components";

const FormItem = Form.Item;

const Content = styled.div`
  max-width: 400px;
  z-index: 2;
  min-width: 300px;
`;

const Register = (props) => {
  const defaultValues = {
    name: null,
    phone: null,
    email: null,
    password: null,
    confirmPassword: null,
    checked: false,
  };

  const { handleSubmit, reset, watch, control, errors, getValues } = useForm({
    defaultValues,
  });
  // const { register, errors, handleSubmit, control } = useForm({
  //    mode: 'onChange',
  // });

  const onSubmit = async (data) => {
    try {
      console.log("data", data);
    } catch (err) {
      console.log("err", err);
    }
  };

  return (
    <Row
      type="flex"
      align="middle"
      justify="center"
      className="px-3 bg-white"
      style={{ minHeight: "100vh" }}
    >
      <Content>
        <div className="text-center mb-5">
          <Link href="/signup">
            <a className="brand mr-0">
              <PlaySquareTwoTone style={{ fontSize: "32px" }} />
            </a>
          </Link>
          <h5 className="mb-0 mt-3">Sign up</h5>

          <p className="text-muted">create a new account</p>
        </div>
        <Form layout="vertical" onSubmit={handleSubmit(onSubmit)}>
          <Controller
            as={
              <FormItem
                label="Email"
                name="email"
                rules={[
                  {
                    type: "email",
                    message: "The input is not valid E-mail!",
                  },
                  {
                    required: true,
                    message: "Please input your E-mail!",
                  },
                ]}
              >
                <Input
                  prefix={<MailTwoTone style={{ fontSize: "16px" }} />}
                  type="email"
                  placeholder="Email"
                />
              </FormItem>
            }
            control={control}
            name="select"
          />

          {/* <Input inputRef={register} name="input" /> */}

          <button type="button" onClick={() => reset({ defaultValues })}>
            Reset
          </button>
          <input type="submit" />
        </Form>
      </Content>
    </Row>
  );
};

export default Register;

现在，正如您所看到的，我在输入字段中使用了常规表单标签。但是使用常规表单，我没有得到 antd 表单提供的布局 Prop 。此外，我无法在提交期间获取值。
所以我的问题是，如何将 AntD 表单组件与 react hook 表单一起使用，以便我可以使用 react-hook0form 和 Antd 样式的好处。

Answer 1

您可以简单地使用内置 useForm Ant 设计的方法，不需要拉第三方。看起来像:

const [form] = Form.useForm();

表格还有 onFinish方法不是 onSubmit在 ant 中，至少在版本 4 中。