React_TodoList实现增删改查功能

最新推荐文章于 2023-10-30 15:51:27 发布

小九✲

最新推荐文章于 2023-10-30 15:51:27 发布

阅读量1.3k

点赞数 1

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/l_nine/article/details/103694972

版权

本文介绍了如何使用React实现TodoList的基本功能，包括添加、查询、删除和修改数据。通过利用localStorage进行数据持久化，使用setState方法更新state，并详细解释了其异步性质和回调函数的作用。同时还提及了HTML页面和JavaScript代码的实现部分。

摘要由CSDN通过智能技术生成

TodoList实现增删改查功能

功能代码需要实现：
(1) 添加数据
(2). 查询数据，展示
(3). 删除数据
(4). 修改数据
数据持久化操作

localStorage.setItem(‘key’,value)
var value = localStorage.getItem(‘key’)
修改state属性

this.setState(参数1,参数2)，修改state属性的函数
参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据
另：setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

1、HTML页面代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <style>
      *{
    margin:0;padding:0;}