React项目之编辑时表单数据回显——2022-06-23

最新推荐文章于 2024-03-18 17:46:50 发布

有个抽抽

最新推荐文章于 2024-03-18 17:46:50 发布

阅读量2.4k

点赞数 3

分类专栏：学习碎片文章标签： react.js

本文链接：https://blog.csdn.net/m0_51400566/article/details/125427758

版权

学习碎片专栏收录该内容

47 篇文章 0 订阅

订阅专栏

需求：点击【编辑】按钮弹出Modal框，并且表单能够回显数据。

踩坑：用Form的initialValues属性设置能实现一定效果。但是会出现仅首次加载有效，并且会影响共用此弹框的【新增】功能。

解决方法：

1）定义变量

  const [form] = Form.useForm();

2）在Form内设置form={form}，Form.Item设置好其name属性

3）在编辑按钮点击事件写入方法：setFields()

        <a
          key="edit"
          onClick={(e) => {
            e.preventDefault();
            console.log(record, 888);
            showModal('add-edit-user');
            setCurrentRow(record);
            form.setFieldsValue({
              user_fullname: record.User_Name,
            });
          }}
        >
          <FormattedMessage id="pages.edit" defaultMessage="Edit" />
        </a>