快捷導(dǎo)航

使用React實現(xiàn)一個簡單的待辦任務(wù)列表

更新時間：2023年08月07日 09:01:45 作者：Estrellayue

這篇文章主要給大家介紹了使用React和Ant Design庫構(gòu)建的待辦任務(wù)列表應(yīng)用,它包含了可編輯的表格,用戶可以添加、編輯和完成任務(wù),以及保存任務(wù)列表數(shù)據(jù)到本地存儲,文中有相關(guān)的代碼示例,需要的朋友可以參考下

使用React和Ant Design庫構(gòu)建的待辦任務(wù)列表應(yīng)用。它包含了可編輯的表格，用戶可以添加、編輯和完成任務(wù)，以及保存任務(wù)列表數(shù)據(jù)到本地存儲。

導(dǎo)入所需的模塊和組件：代碼一開始導(dǎo)入了React相關(guān)的模塊以及Ant Design的一些組件和類型。
創(chuàng)建EditableContext上下文：這里創(chuàng)建了一個名為 EditableContext 的React上下文，用于在表格組件之間傳遞 FormInstance 實例，以便處理表格中的表單操作。
定義數(shù)據(jù)類型和接口：
- Item ：代表待辦任務(wù)的數(shù)據(jù)結(jié)構(gòu)，包含了 key 和 name 屬性。
- EditableRowProps ：傳遞給 EditableRow 組件的屬性接口，包含了索引值 index 。
- EditableCellProps ：傳遞給 EditableCell 組件的屬性接口，包含了列標(biāo)題 title 、是否可編輯 editable 、子元素 children 等。
EditableRow組件：這是一個函數(shù)式組件，用于包裹每一行的表格行，在其中使用了 Form 組件來創(chuàng)建表單，以支持行內(nèi)編輯功能。
EditableCell組件：這個組件是用于可編輯單元格的核心邏輯。它根據(jù)編輯狀態(tài)渲染不同的內(nèi)容，可以包含一個 Input 表單用于編輯，也可以顯示任務(wù)名稱。
App組件：
- 在這里首先從本地存儲中獲取任務(wù)數(shù)據(jù)、已完成任務(wù)數(shù)據(jù)和計數(shù)器。
- 定義了一系列處理任務(wù)操作的函數(shù)，如刪除任務(wù)、添加任務(wù)、保存數(shù)據(jù)等。
- 創(chuàng)建了默認(rèn)的表格列配置，包括待完成任務(wù)的列和已完成任務(wù)的列。
- 使用 useState 來管理任務(wù)數(shù)據(jù)、已完成任務(wù)數(shù)據(jù)和計數(shù)器，并將它們初始化為從本地存儲中獲取的數(shù)據(jù)。
- 使用 components 對象來指定自定義表格的行和單元格渲染方式。
- 對默認(rèn)列配置進行處理，添加了可編輯屬性，并為每列設(shè)置了 onCell 回調(diào)函數(shù)，以便在單元格內(nèi)處理編輯邏輯。
- 最后，渲染了應(yīng)用的界面，包括輸入任務(wù)、添加任務(wù)、保存任務(wù)按鈕以及兩個表格，一個用于展示待完成任務(wù)，另一個用于展示已完成任務(wù)。

代碼實現(xiàn)了一個簡單的待辦任務(wù)列表應(yīng)用，用戶可以在輸入框中添加任務(wù)，點擊任務(wù)完成按鈕將任務(wù)標(biāo)記為已完成，還可以編輯任務(wù)名稱并保存數(shù)據(jù)到本地存儲。整體來說，代碼利用了React的狀態(tài)管理和Ant Design的組件來實現(xiàn)了任務(wù)列表的展示、編輯和保存功能。