reactjs - 带有 React 钩子形式的 Antd 表单

问题描述

我正在尝试将 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 表单提供的布局道具。我也无法在提交期间获取值。

所以我的问题是，如何将 AntD 表单组件与 react hook 表单一起使用，以便我可以使用 react-hook0form 以及 Antd 样式的好处。

标签： reactjsnext.jsantdreact-hook-form

可以简单的使用 ant design 自带的useForm方法，无需拉入第三方。看起来像：

const [form] = Form.useForm();

Form 也有ant 中onFinish没有的方法onSubmit，至少在版本 4 中是这样。

reactjs - 带有 React 钩子形式的 Antd 表单

问题描述

解决方案

推荐阅读