ant design 4.x Form 表单回显以及关闭Model弹窗清空表单的代码实现

最新推荐文章于 2024-01-15 11:02:58 发布

九层嵌套 for 循环

最新推荐文章于 2024-01-15 11:02:58 发布

阅读量449

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_72099243/article/details/130383888

版权

本文介绍了如何在React中利用AntDesign的Form组件进行表单管理，包括使用useForm创建表单实例，使用setFieldsValue实现数据回显，以及在Modal弹框关闭时通过resetFields清空表单数据。

摘要由CSDN通过智能技术生成

首先需要使用 Form 表单提供的方法创建 from

 const [form] = Form.useForm()

然后在 From 表单使用 from 绑定

 <Form
          form={form}

接着需要使用回显时，直接调用 form 身上的 setFieldsValue 方法即可实现

  // 回显
    form.setFieldsValue({
      username: record.name,
      password: '密码回显成功了'
    })

如果需要一个弹框可以编辑，也可以新增，那么就需要在关闭弹框的同时清空 From 表单的数据，代码如下。

<Modal
    afterClose={() => {
          form.resetFields()
 }}

直接可以使用 from 身上的 resetFields 方法，清空表单数据。

时小记，终有成。

关注