使用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>