快捷導(dǎo)航

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

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

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

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

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

... ... 略
      title: '結(jié)束時(shí)間',
      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>
      ),
    },
  ];

// 點(diǎn)擊編輯按鈕
  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è)置正在編輯的項(xiàng)目數(shù)據(jù)
    setIsEditing(true);  // 設(shè)置為編輯模式
    setOpen(true);  // 打開表單彈窗
    //編輯回顯
    form.setFieldsValue({
      itemCompany: record.account,
      itemTitle: record.title,
      itemAddress: record.address,
      itemDate: [startMoment, endMoment], // 將moment對(duì)象數(shù)組設(shè)置到itemDate字段
    });  // 將編輯項(xiàng)目的數(shù)據(jù)填充到表單中
  };

請(qǐng)注意，在此之前使用的moment庫來解析日期字符串。如果我們項(xiàng)目中還沒有引入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)該與我的起止時(shí)間字段是一致的。如果不一致就會(huì)發(fā)生Invalid Date字段。

具體報(bào)錯(cuò)我下一篇博客會(huì)寫到，這些都是我在寫項(xiàng)目中遇到的問題，雖然算不上什么大問題，但是在制作項(xiàng)目時(shí)也是印象深刻，為了避免以后再因?yàn)橥浕蛘叽中挠龅酱祟悊栴}，就先記錄下來！

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

您可能感興趣的文章: