利用React实现简单待办列表 | 豆包MarsCode AI刷题

isyuah
123 阅读3分钟

作为一个React初学者，这次要利用最简单的useState设计一个简单的待办事项列表
使用环境为Vite + Typescript + React
注: Typescript为个人习惯，选用js也完全可以

项目搭建

首先利用pnpm创建一个新的Vite项目

pnpm create vite

然后依次输入项目名，选择React + Typescript + SWC，就新建好了一个新的项目。然后按照提示执行以下命令

cd simpletodo
pnpm i
pnpm run dev

访问控制台显示的链接就可以看到默认的页面了
然后我们删除掉默认的App.tsx中的App函数中的代码，然后删去不需要的CSS，建议保留index.css以及App.css中的按钮居中样式

UI编写

TSX HTML部分

考虑到语义化，同时为了简单，我们使用一个ul标签作待办列表的展示，每个li标签后都跟着两个按钮，分别对应编辑和删除功能。

return(<>
  <ul>
      {todos.map((todo, index) => (
          <li>
              <span>{todo}</span>
              <button onClick={() => delTodo(index)} style={{marginLeft: "10px"}}>删除</button>
              <button onClick={() => changeTodo(index)} style={{marginLeft: "10px"}}>修改</button>
          </li>
      ))}
  </ul>
    <br/>
    <br/>
    <button onClick={addTodo}>添加todo</button>
</>)

注意

  1. react中不能使用class属性，而使用className
  2. react中事件绑定使用onClick等小驼峰属性名，用{}包裹住函数来实现，因此，如果我们要给函数传参数，需要使用箭头函数
    比如onClick = {() => fun(1)}
  3. <> </>的作用是将同级的标签放到一起，但不需要渲染额外的根标签
  4. react中的元素渲染需要使用组件化思想，例如代码中的列表项渲染使用map函数完成

useState

介绍

创建一个响应式变量，并且返回一个数组，前两项分别为用来读取值的变量和用来修改值的函数。

基本用法

const [value, setValue] = useState();

value

用来访问变量值的变量，在react中用到value变量的地方都会在value被setValue函数修改时以新的value值触发重新渲染

setValue

用来修改value的函数，绝大多数情况只有在使用setValue修改value值后才会触发重新渲染

注意

即使对象和数组这类有自己的修改函数，比如push、splice等，但在react中不能直接调用这类函数，而应该通过setValue函数赋予新值才会触发重新渲染，比如value为[1, 2]，我要添加新元素3时

const [value, setValue] = useState([]);
value.push(3); // 错误写法
setValue(value.concat(3)); // 正确写法1
setValue([...value, 3]); // 正确写法2

功能编写

为了简便易理解，我们使用自带的prompt做输入框，空值代表放弃操作，有能力的可以自己实现输入框

添加待办 - addTodo

使用展开运算符...完成，即上述数组添加写法2

function addTodo() {
    const p = prompt('输入内容')
    if (p) {
        setTodos([...todos, p])
    }
}

删除待办 - delTodo

因为todos不能直接修改，所以我们使用slice、展开运算符实现创建不含待删除项的新数组

function delTodo(index: number) {
  setTodos([...todos.slice(0, index), ...todos.slice(index + 1)])
}

修改待办 - changeTodo

根据官网推荐写法，我们使用map函数返回新数组来实现数组编辑

function changeTodo(index: number) {
    const p = prompt("输入新内容，空白视为放弃")
    if (p) {
        setTodos(todos.map((v, i) => i === index ? p : v))
    }
}

完整代码及效果(App.tsx)

import { useState } from 'react'
import './App.css'

function App() {
  //刚才讲的代码
}
export default App

image.png

总结

这次利用Vite + React实现了一个最简单的待办事项列表项目，教程完全从零开始，包括了从模板新建项目的流程，作为初学者的一个项目，同时也是我学习React迈出的第一步

avatar
文章
阅读
粉丝