antd表格数据回显在form表单中

最新推荐文章于 2024-06-14 10:14:02 发布

Realistic-er

最新推荐文章于 2024-06-14 10:14:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_52518047/article/details/131666792

在AntDesign(antd)的使用中，当Modal组件内包含一个Form表单，可以通过点击表格的编辑按钮将选中行的数据回显到表单中。利用Modal的`destroyOnClose`属性设置为true和Form的`preserve`属性设置为false，可以实现Modal关闭时清空表单数据。通过useState管理record对象，并在useEffect中监听其变化，使用form.setFieldsValue方法设置表单的初始值来实现数据回显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用antd的过程中，组件Modal中嵌套了一个form表单，需要点击table表格中的编辑按钮，该行数据可以在form表单中进行回显。

表格编辑按钮：

const edit = (record:DataType) => {
  (childRef.current as any).showModalEdit(record);
};

form表单
1.Modal中destroyOnClose={true}搭配form表单preserve={false}使用，可以做到关闭modal，form表单数据清空

<Modal title="创建" open={isModalOpen} okText="提交" cancelText="取消" destroyOnClose={true}
            onOk={handleOk} onCancel={handleCancel} forceRender>
              <Form
              name="basic"
              form={form}
              style={{ maxWidth: 600 }}
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
              preserve={false}
            >
          </Form>
          </Modal>

2.点击编辑按钮，传递该行数据record，在form组件中声明recordobject，点击编辑，modal弹出，将record赋值给recordobject，利用useEffect监督recordobject的变化，并在useEffect中通过form.setFieldsValue设置表单的值。

const [recordobject, setIsRecord] = useState({});
const [form] = Form.useForm();
useEffect(() => {
  form.setFieldsValue({...recordobject})
}, [recordobject])
const showModal = () => {
  setIsModalOpen(true);
};

const showModalEdit = (record:any) => {
  setIsModalOpen(true);
  setIsRecord(record);
};