使用React 实现一个待办事项列表｜ 青训营

创建项目

• 通过命令台-输入

yarn create vite

• 填项目名
• 选择项目（React、Vue）
• 选择编程方式（如图）

初始化项目

因为就只是写个列表，所以就直接用App.tsx

1. 在main.tsx中创建根组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import TodoList from './todolist.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
)

2. 引用useState，定义Todo类型，创建TodoList

import { useState } from 'react';

interface Todo {
  id: number;
  text: string;
}

const TodoList = () =>{
...
}

export default TodoList;

3. 定义状态，确定功能及页面

  // 定义状态
  const [todos, setTodos] = useState<Todo[]>([]);
  const [textInput, setTextInput] = useState('');

功能：添加待办事项，更新待办事项，删除待办事项

页面：

主要是实现功能哈？！

代码实现

实现前端增删改查

添加事项 addTodo

注意点：

1. 判断输入框值为空不添加事项

2. 创建新对象暂放数据

3. 将新对象传入渲染函数中

4. 将输入框值清空

const addTodo = () => {
    if (textInput.trim() !== '') {
      const newTodo: Todo = {
        id: todos.length + 1,
        text: textInput
      };
      setTodos([...todos, newTodo]);
      setTextInput('');
    }
};

删除事项 deleteTodo (id:number)

注意点：

1. 通过id删除事项
2. 用filter过滤id，生成新对象
3. 将新对象传入渲染函数中

const deleteTodo = (id: number) => {
    const updatedTodos = todos.filter(todo => todo.id !== id);
    setTodos(updatedTodos);
};

删除的方式有很多

• 循环 map,foreach,filter,findIndex
• 删除 splice(index,1)

更新事项 updateTodo (id:number,updatedText:string)

注意点：

1. 通过id确定需要修改事项的位置，updateText的值用修改原事项
2. 用map过滤id，生成新对象
3. 将新对象传入渲染函数中

 const updateTodo = (id: number, updatedText: string) => {
    const updatedTodos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          text: updatedText
        };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

其实，与删除类型，通过id，赋上新的值

返回页面

我也是头一次写react，这里感觉和vue的template相似

注意点：

1. 将数据与标签绑定，通过onChange,onClick来添加事件
2. ul通过map遍历li，li通过key值绑定数据的id

return (
    <div>
      <div>
        <input
          type="text"
          value={textInput}
          onChange={e => setTextInput(e.target.value)}
        />
        <button onClick={addTodo}>添加</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => {
              const updatedText = prompt('请输入修改后的待办事项:');
              if (updatedText) {
                updateTodo(todo.id, updatedText);
              }
            }}>编辑</button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );