使用 React 实现一个简单的待办事项列表| 豆包MarsCode AI刷题使用 React 实现一个简单的待办事项列

使用 React 实现一个简单的待办事项列表

在这篇文章中，我们将通过 React 构建一个简单的待办事项列表应用程序。这个应用程序允许用户添加、编辑和删除待办事项。我们将通过一些简单的组件和状态管理来实现这些功能。

1. 设置 React 环境

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。接下来，我们可以通过以下命令使用 create-react-app 创建一个新的 React 项目：

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

此时，你已经成功创建了一个基本的 React 应用，且可以在浏览器中看到默认页面。

2. 创建待办事项列表组件

我们需要一个组件来显示和管理待办事项。在这个组件中，我们将管理待办事项的状态，允许用户进行操作（添加、编辑、删除）。首先，我们创建一个新的文件 TodoApp.js。

import React, { useState } from 'react';

const TodoApp = () => {
  // 定义状态，存储待办事项列表
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [editingTodo, setEditingTodo] = useState(null);

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

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

  // 开始编辑待办事项
  const startEditing = (todo) => {
    setEditingTodo(todo);
    setInputValue(todo.text);
  };

  // 保存编辑
  const saveEdit = () => {
    if (editingTodo && inputValue.trim()) {
      setTodos(todos.map(todo =>
        todo.id === editingTodo.id ? { ...todo, text: inputValue } : todo
      ));
      setEditingTodo(null);
      setInputValue('');
    }
  };

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

      <div className="input-container">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="输入待办事项"
        />
        <button onClick={editingTodo ? saveEdit : addTodo}>
          {editingTodo ? '保存' : '添加'}
        </button>
      </div>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => startEditing(todo)}>编辑</button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

解释：

useState Hook：我们使用 useState 来管理待办事项的列表 todos、输入框的值 inputValue，以及当前编辑的待办事项 editingTodo。
添加待办事项：addTodo 函数会将输入框中的内容添加到待办事项列表中，Date.now() 用作唯一的 ID。
删除待办事项：deleteTodo 函数会删除对应 ID 的待办事项。
编辑待办事项：startEditing 函数会把待编辑的事项赋值给 editingTodo，并将输入框的内容填充为待办事项的文本。saveEdit 函数会保存编辑后的内容。
条件渲染：根据是否正在编辑，按钮的文本会显示为 "保存" 或 "添加"。

3. 在 App.js 中引入 TodoApp 组件

接下来，我们需要将 TodoApp 组件引入并显示在 App.js 中：

import React from 'react';
import TodoApp from './TodoApp';

function App() {
  return (
    <div className="App">
      <TodoApp />
    </div>
  );
}

export default App;

4. 添加样式

为了让我们的待办事项列表看起来更加整洁，我们可以为应用添加一些基本的样式。在 src/App.css 中，添加以下 CSS 样式：

.App {
  text-align: center;
}

.todo-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.input-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex-grow: 1;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

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

li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

li button {
  background-color: #f44336;
}

li button:hover {
  background-color: #e53935;
}

5. 运行应用

现在，确保你已经保存了所有文件，然后在终端中运行：

npm start

这将启动开发服务器，并且你可以在浏览器中访问 http://localhost:3000 来查看你的待办事项应用。

6. 结果展示

你将看到一个可以输入待办事项的输入框。
点击 "添加" 按钮将添加一个新待办事项。
每个待办事项旁边都有 "编辑" 和 "删除" 按钮。
点击 "编辑" 将启用编辑模式，并允许用户修改待办事项。
点击 "保存" 会保存更改，点击 "删除" 将删除该事项。