轻松回显 Antd 表单 - 模态框和抽屉不再是坑

前端

2023-02-22 21:42:39

在 Ant Design 中实现模态框和抽屉表单回显的最佳实践

在项目开发中，经常会遇到需要在模态框或抽屉中使用表单的情况。为了确保表单中的数据与后端数据保持一致，我们需要实现表单回显功能。然而，直接使用 initialValues 属性可能会导致上一次表单值一直存在的问题。

本文将详细介绍如何使用 Ant Design 来解决这个问题，并提供了一个完整的示例代码来实现表单回显。

解决表单值一直存在的问题

为了解决表单值一直存在的问题，我们可以采取以下步骤：

在父组件中，定义一个 state 来存储表单数据。
在子组件中，使用 Form.useForm() 获取表单实例。
在表单实例中，使用 setFieldsValue() 方法设置表单初始值。
在父组件中，在模态框或抽屉打开时，将 state 中的数据传递给子组件。
在子组件中，使用 useEffect() 钩子，在组件挂载时调用 setFieldsValue() 方法，将父组件传递的数据设置给表单。

示例代码

父组件：

import React, { useState } from "react";
import { Button, Modal } from "antd";
import ChildForm from "./ChildForm";

const ParentComponent = () => {
  const [visible, setVisible] = useState(false);
  const [formData, setFormData] = useState({ name: "John Doe", age: 25 });

  const handleOpenModal = () => {
    setVisible(true);
  };

  const handleCloseModal = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button onClick={handleOpenModal}>Open Modal</Button>
      <Modal visible={visible} onCancel={handleCloseModal}>
        <ChildForm formData={formData} />
      </Modal>
    </div>
  );
};

export default ParentComponent;

子组件：

import React, { useEffect } from "react";
import { Form, Input } from "antd";

const ChildForm = ({ formData }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue(formData);
  }, [form, formData]);

  return (
    <Form form={form}>
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="Age" name="age">
        <Input />
      </Form.Item>
    </Form>
  );
};

export default ChildForm;