实现一个基于React、Antd的表单弹窗组件

以下是一个基于React和Antd的表单弹窗组件的实现示例。该组件可以根据传入的props渲染不同的表单，支持表单校验和提交，并且可以在提交成功后显示成功提示信息。

import React, { useState } from 'react';
import { Modal, Form, Input, Button, message } from 'antd';

const FormModal = ({ title, visible, onCancel, onSubmit, formFields }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleOk = async () => {
    setLoading(true);
    try {
      const values = await form.validateFields();
      await onSubmit(values);
      message.success('提交成功');
      setLoading(false);
      onCancel();
    } catch (error) {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
          提交
        </Button>,
      ]}
    >
      <Form form={form}>
        {formFields.map((field) => (
          <Form.Item
            key={field.name}
            label={field.label}
            name={field.name}
            rules={[{ required: true, message: `请输入${field.label}` }]}
          >
            <Input />
          </Form.Item>
        ))}
      </Form>
    </Modal>
  );
};

export default FormModal;

该组件需要传入以下props:

• title: 弹窗标题
• visible: 弹窗是否可见
• onCancel: 取消按钮点击事件处理函数
• onSubmit: 提交按钮点击事件处理函数，需要返回Promise
• formFields: 表单字段的配置数组，每个配置包括label和name两个属性

使用示例：

import React, { useState } from 'react';
import FormModal from './FormModal';

const Example = () => {
  const [visible, setVisible] = useState(false);

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

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

  const handleSubmit = (values) => {
    // 处理表单提交逻辑，返回Promise
  };

  const formFields = [
    { label: '用户名', name: 'username' },
    { label: '密码', name: 'password' },
  ];

  return (
    <div>
      <button onClick={handleOpenModal}>打开弹窗</button>
      <FormModal
        title="示例表单弹窗"
        visible={visible}
        onCancel={handleCloseModal}
        onSubmit={handleSubmit}
        formFields={formFields}
      />
    </div>
  );
};

export default Example;