React中Ant?Design組件日期編輯回顯的實(shí)現(xiàn)
這個(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庫(kù)來解析日期字符串。如果我們項(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
antd4里table滾動(dòng)的實(shí)現(xiàn)
本文主要介紹了antd4里table滾動(dòng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁面見進(jìn)行切換，下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法，文中通過圖文介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù),廣泛應(yīng)用于開發(fā)現(xiàn)代單頁應(yīng)用（SPA）,在 React 中,狀態(tài)管理是一個(gè)關(guān)鍵概念,因?yàn)樗苯佑绊懙浇M件的渲染和用戶體驗(yàn),本文將深入探討 React 中如何更新組件狀態(tài),需要的朋友可以參考下2025-06-06
這篇文章主要介紹了React 元素渲染的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了React?中的列表渲染為什么要加?key,在?React?中我們經(jīng)常需要渲染列表，比如展示好友列表，文中給大家介紹了列表渲染不提供?key?會(huì)如何，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友一起看看吧2022-07-07
這篇文章主要介紹了在 React 中使用 substring() 方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
我們組的前端妹子在組內(nèi)分享時(shí)談到了 react 的鉤子，趁此機(jī)會(huì)我也對(duì)我所理解的內(nèi)容進(jìn)行下總結(jié)，方便更多的同學(xué)了解。在 React 的 v16.8.0 版本里添加了 hooks 的這種新的 API，我們非常有必要了解下他的使用方法，并能夠結(jié)合我們的業(yè)務(wù)編寫幾個(gè)自定義的 hooks。2021-05-05
這篇文章主要介紹了React通過classnames庫(kù)添加類,在vue中添加class是一件非常簡(jiǎn)單的事情，你可以通過傳入一個(gè)對(duì)象, 通過布爾值決定是否添加類，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09