使用React 实现待办事项列表（方向三）｜豆包MarsCode AI 刷题使用 React 实现一个简单的待办事项列

使用 React 实现一个简单的待办事项列表应用，用户可以添加、编辑和删除待办事项。下面是一个基本实现的步骤和代码示例。

项目结构

我们将实现一个包含以下功能的应用：

添加待办事项
删除待办事项
编辑待办事项

步骤

初始化 React 项目
如果你还没有初始化 React 项目，可以使用 create-react-app 创建一个新的项目：
```
bashCopy Code
npx create-react-app todo-list
cd todo-list
npm start
```
创建 Todo 组件 我们将创建一个 TodoList 组件来显示待办事项，并处理添加、删除、编辑等功能。

代码实现

1. `App.js`

jsxCopy Code
import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  const [editIndex, setEditIndex] = useState(null);
  const [editText, setEditText] = useState('');

  // 添加待办事项
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { text: input, id: Date.now() }]);
      setInput('');
    }
  };

  // 删除待办事项
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // 编辑待办事项
  const editTodo = (id) => {
    const todoToEdit = todos.find(todo => todo.id === id);
    setEditIndex(id);
    setEditText(todoToEdit.text);
  };

  // 保存编辑的待办事项
  const saveEdit = () => {
    setTodos(todos.map(todo => (todo.id === editIndex ? { ...todo, text: editText } : todo)));
    setEditIndex(null);
    setEditText('');
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>

      {/* 输入框和按钮 */}
      <div>
        <input 
          type="text" 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          placeholder="输入待办事项"
        />
        <button onClick={addTodo}>添加</button>
      </div>

      {/* 编辑待办事项 */}
      {editIndex !== null && (
        <div>
          <input 
            type="text" 
            value={editText} 
            onChange={(e) => setEditText(e.target.value)} 
            placeholder="编辑待办事项"
          />
          <button onClick={saveEdit}>保存</button>
        </div>
      )}

      {/* 待办事项列表 */}
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => editTodo(todo.id)}>编辑</button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

2. `App.css`

cssCopy Code
.App {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 5px;
  margin: 10px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  margin: 5px;
  font-size: 16px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

button:hover {
  background-color: #ddd;
}

代码解释

State 管理：
- todos: 存储待办事项的数组，每个待办事项包含一个 id 和 text 属性。
- input: 用于存储用户输入的待办事项文本。
- editIndex: 存储当前正在编辑的待办事项的 id，如果没有正在编辑的项，则为 null。
- editText: 存储正在编辑的待办事项的文本内容。
功能函数：
- addTodo: 该函数会将用户输入的待办事项添加到 todos 数组中，且会清空输入框。
- deleteTodo: 删除指定 ID 的待办事项。
- editTodo: 点击“编辑”按钮时，会将待办事项的文本填入输入框，供用户修改。
- saveEdit: 保存编辑后的待办事项，将其更新到 todos 数组中。
UI 渲染：
- 一个输入框和“添加”按钮用于添加新待办事项。
- 如果有待办事项正在编辑，会显示一个编辑框和“保存”按钮。
- 使用 map() 方法遍历 todos 数组并显示每个待办事项，同时为每个待办事项提供编辑和删除按钮。

运行项目

确保你已安装依赖并启动了开发服务器：
```
bashCopy Code
npm start
```
在浏览器中访问 http://localhost:3000，你就可以看到待办事项列表应用，具有添加、编辑和删除功能。

总结

这个简单的待办事项列表应用展示了如何使用 React 来管理状态并动态更新 UI。通过利用 React 的 useState 钩子，我们能够灵活地管理输入框内容、待办事项列表以及当前编辑的待办事项。

使用React 实现待办事项列表（方向三）｜ 豆包MarsCode AI 刷题

项目结构

步骤

代码实现

1. App.js

2. App.css

代码解释

运行项目

总结

使用React 实现待办事项列表（方向三）｜豆包MarsCode AI 刷题

1. `App.js`

2. `App.css`