快捷導航

React中Ant?Design組件日期編輯回顯的實現(xiàn)

更新時間：2025年04月01日 09:45:39 作者：聶聶臉

本文主要介紹了React中Ant?Design組件日期編輯回顯的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

這個編輯事件綁定后，為了將日期數(shù)據(jù)會先到RangePicker組件，需要確保itemDate字端被正確設(shè)置，其格式應(yīng)該和itemDate組件的格式是一樣的。

通常， RangePicker 組件期望接收一個數(shù)組作為值，這個數(shù)組包含兩個元素:開始時間和結(jié)束時間(都是 moment對象或者可以被 moment 解析的字符串格式)。

... ... 略
      title: '結(jié)束時間',
      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"); // 確保這里的格式與您的數(shù)據(jù)格式匹配
    const endMoment = moment(record.end_time, "YYYY-MM-DD"); // 確保這里的格式與您的數(shù)據(jù)格式匹配
    setEditingItem(record);  // 設(shè)置正在編輯的項目數(shù)據(jù)
    setIsEditing(true);  // 設(shè)置為編輯模式
    setOpen(true);  // 打開表單彈窗
    //編輯回顯
    form.setFieldsValue({
      itemCompany: record.account,
      itemTitle: record.title,
      itemAddress: record.address,
      itemDate: [startMoment, endMoment], // 將moment對象數(shù)組設(shè)置到itemDate字段
    });  // 將編輯項目的數(shù)據(jù)填充到表單中
  };

請注意，在此之前使用的moment庫來解析日期字符串。如果我們項目中還沒有引入moment，需要先安裝：

npm install moment

然后需要再我們需要用到的頁面引入moment：

import moment from 'moment';

另外還需要確保RangePicker組件中的format屬性和我們?nèi)掌谧址嗥ヅ?，這樣RangePicker才能正確的顯示和解析。在我的代碼中format屬性已經(jīng)設(shè)置為 'YYYY-MM-DD HH:mm:ss' 這應(yīng)該與我的起止時間字段是一致的。如果不一致就會發(fā)生Invalid Date字段。

具體報錯我下一篇博客會寫到，這些都是我在寫項目中遇到的問題，雖然算不上什么大問題，但是在制作項目時也是印象深刻，為了避免以后再因為忘記或者粗心遇到此類問題，就先記錄下來！

到此這篇關(guān)于React中Ant Design組件日期編輯回顯的實現(xiàn)的文章就介紹到這了,更多相關(guān)React Ant Design回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: