当前位置：首页 > article >正文

React中Ant Design组件日期编辑回显

article 2024/11/25 15:03:25

这个编辑事件绑定后，为了将日期数据会先到RangePicker组件，需要确保itemDate字端被正确设置，其格式应该和itemDate组件的格式是一样的。

通常， RangePicker 组件期望接收一个数组作为值，这个数组包含两个元素:开始时间和结束时间(都是 moment对象或者可以被 moment 解析的字符串格式)。

... ... 略
      title: '结束时间',
      dataIndex: 'end_time',
      align: 'center',

    },
    {
      title: '操作',
      align: 'center',
      render: (record) => (
        <div style={{ width: '90%', display: 'flex', justifyContent: 'space-between', marginLeft: '10px' }}>
          <Button type="primary" onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="primary" danger>下架</Button>
        </div>
      ),
    },
  ];

// 点击编辑按钮
  const handleEdit = (record: any) => {
    console.log(record);
    const startMoment = moment(record.start_time, "YYYY-MM-DD"); // 确保这里的格式与您的数据格式匹配
    const endMoment = moment(record.end_time, "YYYY-MM-DD"); // 确保这里的格式与您的数据格式匹配
    setEditingItem(record);  // 设置正在编辑的项目数据
    setIsEditing(true);  // 设置为编辑模式
    setOpen(true);  // 打开表单弹窗
    //编辑回显
    form.setFieldsValue({
      itemCompany: record.account,
      itemTitle: record.title,
      itemAddress: record.address,
      itemDate: [startMoment, endMoment], // 将moment对象数组设置到itemDate字段
    });  // 将编辑项目的数据填充到表单中
  };

请注意，在此之前使用的moment库来解析日期字符串。如果我们项目中还没有引入moment，需要先安装：

npm install moment

然后需要再我们需要用到的页面引入moment：

import moment from 'moment';

另外还需要确保RangePicker组件中的format属性和我们日期字符串相匹配，这样RangePicker才能正确的显示和解析。在我的代码中format属性已经设置为 'YYYY-MM-DD HH:mm:ss' 这应该与我的起止时间字段是一致的。如果不一致就会发生Invalid Date字段。

具体报错我下一篇博客会写到，这些都是我在写项目中遇到的问题，虽然算不上什么大问题，但是在制作项目时也是印象深刻，为了避免以后再因为忘记或者粗心遇到此类问题，就先记录下来！

查看全文

http://www.kler.cn/a/408747.html