Ant 的弹框+表单，关闭弹框时表单清空

使用Ant Design库中的组件构建的一个模态框（Modal）表单。模态框中包含一个表单（Form），表单中有多个表单项（Form.Item），每个表单项包含输入字段（如Input、TextArea）以及校验规则。点击模态框的"保存"按钮或"取消"按钮时，会触发相应的回调函数来关闭模态框并重置表单字段。

1.引入需要的组件

import { Button, Input, Modal, Space, Table, Form, Radio } from "antd";

2.使用Form.useForm()创建表单实例，并将其解构赋值给变量form。

  const [form] = Form.useForm();

3.定义函数，当点击模态框的"取消"按钮时调用。函数内部关闭模态框，使用form.resetFields()重置表单字段。

// 取消按钮

const addCancel = () => {

    setAddModalOpen(false);

    form.resetFields()// 重置表单字段

  };

//保存按钮

  const addOk=()=>{

    setAddModalOpen(false);

    form.resetFields()// 重置表单字段

  }

4.在模态框内部使用<Form>组件创建表单，通过form={form}将之前创建的表单实例传递给表单组件。***这样表单的各个项就清空了***

<Form

         form={form}

          name="basic"

          labelCol={{

            span: 6,

          }}

          wrapperCol={{

            span: 16,

          }}

          style={{

            maxWidth: 600,

          }}

          initialValues={{

            remember: true,

          }}

          onFinish={onFinish}

          onFinishFailed={onFinishFailed}

        >

.......

        </Form>

*模态框完整内容

      <Modal

        title="新增膳食分组"

        open={addModalOpen}

        onOk={addOk}

        onCancel={addCancel}

        footer={null}>

        <Form

         form={form}

          name="basic"

          labelCol={{

            span: 6,

          }}

          wrapperCol={{

            span: 16,

          }}

          style={{

            maxWidth: 600,

          }}

          initialValues={{

            remember: true,

          }}

          onFinish={onFinish}

          onFinishFailed={onFinishFailed}>

          <Form.Item

            label="分组编码"

            name="groupId"

            rules={[

              {

                required: true,

                message: "请输入分组编码!",

              },]}>

            <Input placeholder="请输入" />

          </Form.Item>

          <Form.Item

            label="分组名称"

            name="groupName"

            rules={[

              {

                required: true,

                message: "请输入分组名称!",

              },

            ]} >

            <Input placeholder="请输入" />

          </Form.Item>

          <Form.Item

            label="启用状态"

            name=":groupState"

            rules={[

              {

                required: true,

                message: "请选择权限!",

              },]}>

            <Radio.Group onChange={onChange} value={stateValue}>

              <Radio value={1}>启用</Radio>

              <Radio value={2}>禁用</Radio>

            </Radio.Group>

          </Form.Item>

          <Form.Item label="备注" name="groupRemark">

            <TextArea

              value={textValue}

              onChange={(e) => setTextValue(e.target.value)}

              placeholder="请输入"

              autoSize={{

                minRows: 3,

                maxRows: 5 }} />

          </Form.Item>

          <Form.Item

            wrapperCol={{

              offset: 15 }}>

            <Button onClick={addCancel}>取消</Button>

            <Button className="btnSpace" type="primary" htmlType="submit">

              保存

            </Button>

          </Form.Item>

        </Form>

      </Modal>