React框架如何写todoList程序(增删查改)

故作春风
211 阅读3分钟

React框架是前端热门框架之一, 对于初学者来说可以自己练手实现一个todolist程序, 并且实现增、删、查、改和本地存储的功能, 并且记录时间

本次先记录一下拿React + hooks来写

后续的话还会记录用React + Antd + TS来写

todo程序链接 heshuo527.github.io/my_react_to…

实现效果

image.png

  • 首先用 create-react-app + mytodolist(项目名) 创建一个react项目

image.png

  • 然后用 VSCode 打开, 测试一下是是否能打开 在终端输入npm start

image.png

  • 打开是这样子就代表项目创建好了, 现在可以开始写了, 把src下面多余的文件全都删掉就留下index.js和app.js两个文件夹, 记得也要把这两个文件里面的引用也删掉

image.png

  • 这是最终剩下的文件

image.png

  • 如果有报错的话就是这两行代码没有删掉

image.png

  • 现在可以开始写项目了

先在app.js里面构建好页面

image.png

页面效果

image.png

  • 现在开始实现功能, 首先需要拿到输入的值, 用onChange来监听输入的内容是啥, 然后会借助useState钩子初始化输入框的内容, 并拿到输入的内容, 以下写法看不懂的就去看一下es6和react hooks

image.png

1. 现在开始实现第一个增加todo的功能, 我们需要给增加按钮点击事件, 点击就把得到的值添加到一个对象里面, 属性是contont值是inpValue(这个inpValue就是我们输入的值), 因为后面还要实现其他的功能, 需要其他的属性

image.png

image.png

接下来就是把数组遍历到页面上去, 这里我们用map的方法去遍历数组

image.png

但是会报一个错误, 他的每一个子元素都要添加一个独一无二的的key, 那么给他添加一个key, 在添加进来的每一个数组里面都添加一个key

image.png

我这里的key是一个时间戳, 因为时间戳是独一无二的

image.png

2. 开始实现第二个删除功能, 跟上面一样, 先给删除键按钮绑定点击事件, 用filter过滤的方法过滤数组, 把点击传进来相同key的元素过滤掉, 这样子就实现了删除的功能

image.png

3. 实现第三个功能, 点击完成就给一个todo添加状态, 我们先给span标签添加一个样式, 用三目运算符来决定添加哪个样式, 假如为真就添加样式, 假的话就不添加, 那么怎么知道是真是假呢, 我们给添加进来的每一个todo都添加一个done属性值就false, 当点击的元素里面的done是false的话就给他变成true, 否则就变成false, 这样子就实现了更新一个元素的样式

image.png

image.png

4. 最后就是实现本地存储的功能, 这里我就用localStorage来实现本地存储, localStorage可以在本地存储5M的数据,如果不手动删除就永远都储存在浏览器, 先获取到全部的todolist然后储存到本地, 注意要用JSON序列化数组再存入, 然后反序列化解析出来, 就实现了本地的存储功能

image.png

那么怎么实现页面一加载就执行loadTodoList这个函数呢, 那么就要借助到另外一个钩子, useEffect钩子, 这个钩子代替了类数式组件里面的生命周期钩子, 页面一加载就会执行里面的函数

image.png

5. 记录添加时间的功能, 在内容前面添加一个span标签, 用于展现时间

image.png

最终效果, 时间也会被永久记录, 大家也可以自行添加样式

image.png

avatar
文章
阅读
粉丝