首页antddesign form表单关闭清空

antddesign form表单关闭清空

时间: 2025-01-27 15:10:29 浏览: 57

在antd design中，表单的关闭和清空操作可以通过以下几种方式实现： 1. 关闭表单：可以使用Modal组件的onCancel属性来控制表单的关闭。通常会在取消按钮上绑定这个事件。 2. 清空表单：可以使用Form组件的resetFields方法来清空表单数据。下面是一个简单的示例： ```jsx import React, { useState } from 'react'; import { Form, Input, Button, Modal } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); const [visible, setVisible] = useState(false); const showModal = () => { setVisible(true); }; const handleOk = () => { form.submit(); }; const handleCancel = () => { setVisible(false); form.resetFields(); }; const onFinish = (values) => { console.log('Success:', values); setVisible(false); form.resetFields(); }; return ( <> <Button type="primary" onClick={showModal}> Open Form </Button> <Modal title="My Form" visible={visible} onOk={handleOk} onCancel={handleCancel}> <Form form={form} onFinish={onFinish}> <Form.Item name="username" label="Username"> <Input /> </Form.Item> <Form.Item name="password" label="Password"> <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Modal> </> ); }; export default MyForm; ``` 在这个示例中： 1. 我们使用useState来控制Modal的可见性。 2. 使用Form.useForm()来创建一个form实例。 3. 在handleCancel函数中，我们首先关闭Modal，然后调用form.resetFields()来清空表单。 4. 在onFinish函数中，我们处理表单提交逻辑，然后关闭Modal并清空表单。这样，当用户点击取消按钮或提交表单后，表单都会被清空，并且Modal会被关闭。

阅读全文