【React入门实战】实现Todo代办

文章目录

    • 效果
    • 功能-状态管理
      • 相关接口定义
      • 相关方法定义
    • UI
      • input输入框:回车添加todo
      • 标题
      • 列表
      • 列表项
      • Main
    • 总体代码

非常简单入门的react-todo练习,代码写的很小白。

效果

技术栈:react-typeScript

  • 数据分为代办Todo已办完Done,可以点击复选框切换状态
  • 可以添加代办事件
  • 会用到useStateuseReducer,详情看状态管理 – React 中文文档

在这里插入图片描述
接下来是代码实现。

功能-状态管理

相关参考:
TypeScript中的标记联合类型:实现Todo代办-CSDN博客
迁移状态逻辑至 Reducer 中 – React 中文文档 (docschina.org)

相关接口定义

Todo的状态表示:

text表示代办内容,done表示是否完成,id表示它在列表中的位置。

interface Todo {readonly text: string;readonly done: boolean;readonly id: number;
}

对Todo的操作表示:

interface AddTodo {type: "Add_TODO";text: string;
}interface ToggleTodo {type: "TOGGLE_TODO";index: number;
}// 操作只有添加todo和修改todo两种
type TodoAction = AddTodo | ToggleTodo;

相关方法定义

操作Todo的方法:

// 点击修改状态
function todoReducer(list: Array<Todo>, action: TodoAction): Array<Todo> {switch (action.type) {case "Add_TODO": {return [...list,{text: action.text,done: false,id: list.length,},];}case "TOGGLE_TODO": {return list.map((item, index) => {if (index !== action.index) {return item;}return {text: item.text,done: !item.done,id: item.id,};});}default: {return list;}}
}

useReducer部分:写在比较父级的组件中。把对应方法用prop的方式传给需要用的子组件。此博客写在了Main组件中。

// useReducer
const [todoList, dispatch] = useReducer(todoReducer, initTodo);function handleAddTodo(text: string) {dispatch({type: "Add_TODO",text: text,});
}function handleToggleTodo(index: number) {dispatch({type: "TOGGLE_TODO",index: index,});
}

模拟的数据:initTodo

// 模拟数据
const initTodo: Array<Todo> = [{text: "吃饭",done: true,id: 0,},{text: "睡觉",done: true,id: 1,},{text: "上班",done: true,id: 2,},{text: "下班",done: false,id: 3,},{text: "运动",done: false,id: 4,},{text: "听歌",done: false,id: 5,},
];

UI

react是非常组件化的框架。此Todo可以拆成好几个组件:

  • input输入框:回车添加todo
  • 标题
  • 列表:分开显示Todo/Done的列表
  • 列表项

input输入框:回车添加todo

这里需要用useState管理input输入的状态。

注意:每个input框都要绑定onChange或readonly,否则会报错。

当回车时,添加输入框中的值到Todo的列表,即触发前面定义的handleAddTodo方法。此方法在这里没有定义,因此要从定义它的地方(Main)传过来。

function Add({ handleAddTodo }: { handleAddTodo: Function }) {const [inputValue, setInputValue] = useState("");return (<><div className="header"><inputtype="text"value={inputValue}onChange={(e) => {setInputValue(e.target.value);}}onKeyDown={(e) => {if (e.key === "Enter") {handleAddTodo(inputValue);setInputValue("");}}}placeholder="在这里添加新的代办事件"/></div></>);
}

标题

// 标题
function ShowTitle({ title }: { title: string }) {return (<><h2>{title}</h2></>);
}

列表

  • todoList是reduce中管理的所有事项的列表。
  • done表示当前列表是代办(false)还是已完成(true)
  • handleToggleTodo是点击复选框更改列表项状态的方法
// 展示todo的列表
function ShowList({todoList,done,handleToggleTodo,
}: {todoList: Array<Todo>;done: boolean;handleToggleTodo: Function;
}) {const data = todoList.filter((item) => {return item.done === done;});const show = data.map((item) => {return (<ListItemkey={item.id}item={item}handleToggleTodo={handleToggleTodo}></ListItem>);});return <>{show}</>;
}

列表项

// list的每一项
function ListItem({item,handleToggleTodo,
}: {item: Todo;handleToggleTodo: Function;
}) {return (<div className="item"><inputtype="checkbox"checked={item.done}onChange={() => {handleToggleTodo(item.id);}}name=""id=""/>{item.text}</div>);
}

Main

function Main() {// useReducerconst [todoList, dispatch] = useReducer(todoReducer, initTodo);function handleAddTodo(text: string) {dispatch({type: "Add_TODO",text: text,});}function handleToggleTodo(index: number) {dispatch({type: "TOGGLE_TODO",index: index,});}return (<><Add handleAddTodo={handleAddTodo}></Add><ShowTitle title={"Todo"}></ShowTitle><ShowListtodoList={todoList}done={false}handleToggleTodo={handleToggleTodo}></ShowList><ShowTitle title={"Done"}></ShowTitle><ShowListtodoList={todoList}done={true}handleToggleTodo={handleToggleTodo}></ShowList></>);
}

总体代码

import { useState, useReducer } from "react";// 标题
function ShowTitle({ title }: { title: string }) {return (<><h2>{title}</h2></>);
}// 添加todo的输入框
function Add({ handleAddTodo }: { handleAddTodo: Function }) {const [inputValue, setInputValue] = useState("");return (<><div className="header"><inputtype="text"value={inputValue}onChange={(e) => {setInputValue(e.target.value);}}onKeyDown={(e) => {if (e.key === "Enter") {handleAddTodo(inputValue);setInputValue("");}}}placeholder="在这里添加新的代办事件"/></div></>);
}// list的每一项
function ListItem({item,handleToggleTodo,
}: {item: Todo;handleToggleTodo: Function;
}) {return (<div className="item"><inputtype="checkbox"checked={item.done}onChange={() => {handleToggleTodo(item.id);}}name=""id=""/>{item.text}</div>);
}// 展示todo的列表
function ShowList({todoList,done,handleToggleTodo,
}: {todoList: Array<Todo>;done: boolean;handleToggleTodo: Function;
}) {const data = todoList.filter((item) => {return item.done === done;});const show = data.map((item) => {return (<ListItemkey={item.id}item={item}handleToggleTodo={handleToggleTodo}></ListItem>);});return <>{show}</>;
}function Main() {// useReducerconst [todoList, dispatch] = useReducer(todoReducer, initTodo);function handleAddTodo(text: string) {dispatch({type: "Add_TODO",text: text,});}function handleToggleTodo(index: number) {dispatch({type: "TOGGLE_TODO",index: index,});}return (<><Add handleAddTodo={handleAddTodo}></Add><ShowTitle title={"Todo"}></ShowTitle><ShowListtodoList={todoList}done={false}handleToggleTodo={handleToggleTodo}></ShowList><ShowTitle title={"Done"}></ShowTitle><ShowListtodoList={todoList}done={true}handleToggleTodo={handleToggleTodo}></ShowList></>);
}function App() {return (<><div className="main"><Main></Main></div></>);
}interface Todo {readonly text: string;readonly done: boolean;readonly id: number;
}interface AddTodo {type: "Add_TODO";text: string;
}interface ToggleTodo {type: "TOGGLE_TODO";index: number;
}// 操作只有添加todo和修改todo两种
type TodoAction = AddTodo | ToggleTodo;// 点击修改状态
function todoReducer(list: Array<Todo>, action: TodoAction): Array<Todo> {switch (action.type) {case "Add_TODO": {return [...list,{text: action.text,done: false,id: list.length,},];}case "TOGGLE_TODO": {return list.map((item, index) => {if (index !== action.index) {return item;}return {text: item.text,done: !item.done,id: item.id,};});}default: {return list;}}
}// 模拟数据
const initTodo: Array<Todo> = [{text: "吃饭",done: true,id: 0,},{text: "睡觉",done: true,id: 1,},{text: "上班",done: true,id: 2,},{text: "下班",done: false,id: 3,},{text: "运动",done: false,id: 4,},{text: "听歌",done: false,id: 5,},
];export default App;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/168582.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot项目调用openCV报错:nested exception is java.lang.UnsatisfiedLinkError

今天在通过web项目调用openCV的时候提示如下错误&#xff1a; nested exception is java.lang.UnsatisfiedLinkError:org.opencv.imgcodecs.Imgcodecs.imread_0(Ljava/la如下图所示&#xff1a; 但是通过直接启动java main函数确正常&#xff0c;初步诊断和SpringBoot热加载…

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(二)

新增员工功能开发 1. 新增员工1.1 需求分析和设计1.1.1 产品原型1.1.2 接口设计1.1.3 表设计 1.2 代码开发1.2.1 设计DTO类1.2.2 Controller层1.2.3 Service层接口1.2.4 Service层实现类1.2.5 Mapper层 1.3 功能测试1.3.1 接口文档测试 1.4 代码完善1.4.1 问题一1.4.2 问题二1.…

element-ui中el-table数据合并行和列,应该怎么解决

最近接到一个任务,要实现一个数据报表,涉及到很多合并问题,一开始想着原生会简单点,实际上很麻烦,最后还是用elemen-ui中table自带的合并方法. 最终的效果是要做成这种:1.数据处理,后端返回来的数据是,一个大对象,包含三个数组,既然合并,肯定是要处理成一个数组,并且要把相同的…

ARM-Cortex_M3/M4处理器开发简介

一、关于ARM-Cortex_M4处理器 ARM-Cortex_M3和ARM-Cortex_M4处理器使用32位架构&#xff0c;寄存器组中的内部寄存器、数据通路以及总线接口都是32位的&#xff0c;两者均基于ARMv7-M架构。 1、 Cortex_M处理器使用的指令集架构&#xff08;ISA&#xff09;为Thumb ISA&…

笔记:AI量化策略开发流程-基于BigQuant平台(一)

从本文开始&#xff0c;按照AI策略开发的完整流程&#xff08;共七步&#xff09;&#xff0c;上手在BigQuant平台上快速构建AI策略。本文首先介绍如何使用证券代码模块指定股票范围和数据起止日期。重要的事情说三遍&#xff1a;模块的输入端口有提示需要连线的上游数据类型&a…

try-catch-finally执行以及他们在有return的情况下,基本数据类型、对象以及有异步赋值情况异同分析

这两天面试,遇到好几个人,都是那种我感觉我肚子里的墨水都吐出来完了,难不倒人家,于是问了下家里那位老狗,从最开始就念叨着你问他try-catch在有return的情况下怎么执行的,执行结果是啥,我前面没理,后面确实有点遭不住了,来看看吧,肚子里添点墨水,别把脸丢大了~ 做…

C#中.NET 7.0控制台应用使用LINQtoSQL、LINQtoXML

目录 一、新建控制台应用和数据库连接 二、手动添加System.Data.Linq程序包 三、手动添加System.Data.SqlClient程序包 四、再次操作DataClasses1.dbml 五、示例 1.源码 2.xml文件 默认安装的.NET 7.0控制台应用是不支持使用LINQtoSQL、LINQtoXML的。 默认安装的.NET F…

玩转ansible之参数调试和文件操作篇

更多IT技术文章&#xff0c;欢迎关注微信公众号“运维之美” 玩转ansible之参数调试和文件操作篇 01 剧本调试和帮助02 使用场景举例 上节我们学习了使用ansible进行软件安装&#xff0c;那么安装完软件后&#xff0c;就需要linux系统和软件配置修改了&#xff0c;对于linux主机…

人工智能与教育:未来的技术融合

人工智能与教育&#xff1a;未来的技术融合 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;逐渐渗透到我们生活的方方面面&#xff0c;包括教育领域。AI与教育的结合&#xff0c;有望引发一场教育变革&#xff0c;提高教学效果&#xff0c;实现个性化学习&…

Python+requests+unittest+excel接口自动化测试框架

一、框架结构&#xff1a; 工程目录 二、Case文件设计 三、基础包 base 3.1 封装get/post请求&#xff08;runmethon.py&#xff09; impimport jsonclass RunMethod:def post_main(self,url,data,headerNone):res Noneif header !None: res requests.post(urlurl,datadata,…

语音识别与自然语言处理(NLP):技术前沿与未来趋势

语音识别与自然语言处理&#xff08;NLP&#xff09;&#xff1a;技术前沿与未来趋势 随着科技的快速发展&#xff0c;语音识别与自然语言处理&#xff08;NLP&#xff09;技术逐渐成为人工智能领域的研究热点。这两项技术的结合&#xff0c;使得机器能够更好地理解和处理人类语…

从windows iso文件中提取install.wim

1、首先从微软官方下载需要的windows镜像 https://www.microsoft.com/zh-cn/software-download/windows10/ 2、在下载的iso文件右键&#xff0c;打开压缩包&#xff0c;在sources文件夹下&#xff0c;应该就可以看到install.wim了。但似乎在最新的win10版本&#xff0c;微软采…