使用React 实现一个简单的待办事项列表 | 青训营

使用React和Ant Design库构建的待办任务列表应用。它包含了可编辑的表格,用户可以添加、编辑和完成任务,以及保存任务列表数据到本地存储。

  1. 导入所需的模块和组件:代码一开始导入了React相关的模块以及Ant Design的一些组件和类型。

  2. 创建EditableContext上下文 :这里创建了一个名为EditableContext的React上下文,用于在表格组件之间传递FormInstance实例,以便处理表格中的表单操作。

  3. 定义数据类型和接口

    • Item:代表待办任务的数据结构,包含了keyname属性。
    • EditableRowProps:传递给EditableRow组件的属性接口,包含了索引值index
    • EditableCellProps:传递给EditableCell组件的属性接口,包含了列标题title、是否可编辑editable、子元素children等。
  4. EditableRow组件 :这是一个函数式组件,用于包裹每一行的表格行,在其中使用了Form组件来创建表单,以支持行内编辑功能。

  5. EditableCell组件 :这个组件是用于可编辑单元格的核心逻辑。它根据编辑状态渲染不同的内容,可以包含一个Input表单用于编辑,也可以显示任务名称。

  6. App组件

    • 在这里首先从本地存储中获取任务数据、已完成任务数据和计数器。
    • 定义了一系列处理任务操作的函数,如删除任务、添加任务、保存数据等。
    • 创建了默认的表格列配置,包括待完成任务的列和已完成任务的列。
    • 使用useState来管理任务数据、已完成任务数据和计数器,并将它们初始化为从本地存储中获取的数据。
    • 使用components对象来指定自定义表格的行和单元格渲染方式。
    • 对默认列配置进行处理,添加了可编辑属性,并为每列设置了onCell回调函数,以便在单元格内处理编辑逻辑。
    • 最后,渲染了应用的界面,包括输入任务、添加任务、保存任务按钮以及两个表格,一个用于展示待完成任务,另一个用于展示已完成任务。

代码实现了一个简单的待办任务列表应用,用户可以在输入框中添加任务,点击任务完成按钮将任务标记为已完成,还可以编辑任务名称并保存数据到本地存储。整体来说,代码利用了React的状态管理和Ant Design的组件来实现了任务列表的展示、编辑和保存功能。

相关推荐
夭要7夜宵4 天前
Go 垃圾回收 | 豆包MarsCode AI刷题
青训营笔记
末班车4224 天前
前端框架中的设计模式 | 豆包MarsCode AI刷题
青训营笔记
VanceLLF5 天前
神奇数字组合 | 豆包MarsCode AI刷题
青训营笔记
lann5 天前
Go 程序的优化 | 豆包MarsCode AI刷题
青训营笔记
用户52281271049785 天前
性能优化与调试技巧 | 豆包MarsCode AI刷题
青训营笔记
千慌百风定乾坤7 天前
Go 语言入门指南:基础语法和常用特性解析(下) | 豆包MarsCode AI刷题
青训营笔记
FOFO7 天前
青训营笔记 | HTML语义化的案例分析: 粗略地手绘分析juejin.cn首页 | 豆包MarsCode AI 刷题
青训营笔记
滑滑滑9 天前
后端实践-优化一个已有的 Go 程序提高其性能 | 豆包MarsCode AI刷题
青训营笔记
柠檬柠檬9 天前
Go 语言入门指南:基础语法和常用特性解析 | 豆包MarsCode AI刷题
青训营笔记
用户967136399659 天前
计算最小步长丨豆包MarsCodeAI刷题
青训营笔记