使用React 实现一个简单的待办事项列表|青训营笔记：方向三

我们将使用React实现一个简单的待办事项列表，其中用户可以添加、编辑和删除待办事项，我们可以遵循以下步骤来构建一个小应用。以下是详细的实现代码：

1. 创建一个React应用

首先，确保你已经安装了Node.js和npm（或者使用yarn）。然后可以通过create-react-app快速初始化一个React项目：

bash 复制代码

npx create-react-app todo-app
cd todo-app
npm start

2. 创建组件

我们将使用一个组件来显示待办事项列表，允许用户添加、编辑和删除待办事项。

`App.js`

jsx 复制代码

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

function App() {
  const [todos, setTodos] = useState([]); // 存储待办事项
  const [input, setInput] = useState("");  // 存储用户输入的待办事项

  // 添加待办事项
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { text: input, isEditing: false }]);
      setInput("");  // 清空输入框
    }
  };

  // 删除待办事项
  const deleteTodo = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  // 编辑待办事项
  const editTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].isEditing = true;
    setTodos(newTodos);
  };

  // 提交编辑后的待办事项
  const saveTodo = (index, newText) => {
    const newTodos = [...todos];
    newTodos[index].text = newText;
    newTodos[index].isEditing = false;
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      
      <div className="todo-input">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入待办事项..."
        />
        <button onClick={addTodo}>添加</button>
      </div>

      <ul className="todo-list">
        {todos.map((todo, index) => (
          <li key={index}>
            {todo.isEditing ? (
              <input
                type="text"
                defaultValue={todo.text}
                onBlur={(e) => saveTodo(index, e.target.value)}
                onKeyPress={(e) => {
                  if (e.key === 'Enter') saveTodo(index, e.target.value);
                }}
              />
            ) : (
              <>
                <span>{todo.text}</span>
                <button onClick={() => editTodo(index)}>编辑</button>
              </>
            )}
            <button onClick={() => deleteTodo(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. 样式（可选）

你可以添加一些样式，使待办事项列表看起来更加美观。下面是简单的CSS样式：

`App.css`

css 复制代码

.App {
  text-align: center;
  font-family: Arial, sans-serif;
  margin-top: 50px;
}

.todo-input {
  margin-bottom: 20px;
}

.todo-input input {
  padding: 10px;
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}

.todo-input button {
  padding: 10px 15px;
  font-size: 16px;
}

.todo-list {
  list-style-type: none;
  padding: 0;
}

.todo-list li {
  background: #f1f1f1;
  margin: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-list li button {
  background: #ff4c4c;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.todo-list li button:hover {
  background: #ff1c1c;
}

.todo-list li input {
  padding: 5px;
  font-size: 16px;
  width: 200px;
}

4. 代码解析

State管理:
- todos存储待办事项的数组。每个待办事项对象包含text（待办事项文本）和isEditing（是否处于编辑状态）。
- input存储用户输入的待办事项文本。
功能:
- addTodo函数：将新待办事项添加到todos数组中。
- deleteTodo函数：删除指定索引的待办事项。
- editTodo函数：将待办事项切换为编辑状态，允许用户编辑内容。
- saveTodo函数：保存编辑后的待办事项文本。
UI渲染:
- 如果某个待办事项处于编辑状态（isEditing为true），显示一个输入框，用户可以修改内容；否则，显示一个文本和"编辑"按钮。
- 每个待办事项旁边都有一个"删除"按钮，点击后会删除该事项。

5. 启动项目

确保所有代码都保存好，执行以下命令启动应用：

bash 复制代码

npm start

此时，浏览器会自动打开应用，用户可以添加、编辑和删除待办事项。

总结

这个简单的待办事项列表应用展示了React的基本用法，包括使用useState来管理状态，以及如何通过事件处理来修改这些状态。你可以在此基础上添加更多的功能，比如数据持久化（使用localStorage或后端API）等。