使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项｜豆包MarsCode AI 刷题

在现代前端开发中，React 已成为构建用户界面（UI）的主流库。React 提供了简洁、高效的组件化结构，使得开发人员能够快速构建出交互丰富的 Web 应用程序。本文将通过实现一个待办事项列表，来帮助理解如何使用 React 构建一个基本的前端应用。

在本项目中，用户将能够执行以下操作：

添加新的待办事项
编辑已有的待办事项
删除待办事项

1. 项目初始化

在开始编写代码之前，首先需要设置项目的开发环境。我们将使用 Create React App 来初始化项目。Create React App 是官方推荐的脚手架工具，能够帮助我们快速创建一个 React 项目，且不需要配置 Webpack 或 Babel。

1.1 安装 Create React App

首先，确保开发环境中已经安装了 Node.js 和 npm。然后，使用以下命令全局安装 Create React App：

npx create-react-app todo-app

创建完成后，进入项目目录并启动开发服务器：

cd todo-app
npm start

浏览器会自动打开并显示一个欢迎页面，说明开发环境已经搭建成功。

1.2 项目结构

在项目中，我将使用以下的基本结构来组织代码：

/src
  /components
    TodoList.js
    TodoItem.js
    TodoForm.js
  App.js
  index.js

2. 创建待办事项列表

在 React 中，UI 是由组件组成的。我们首先需要定义待办事项列表的组件，以及每个待办事项的组件。

2.1 TodoItem 组件

TodoItem 组件用于渲染每一项待办事项。每个待办事项会有一个标题和一个删除按钮，点击按钮可以删除该项。

// src/components/TodoItem.js

import React from 'react';

function TodoItem({ todo, onDelete, onEdit }) {
  return (
    <div className="todo-item">
      <span>{todo.text}</span>
      <button onClick={() => onEdit(todo)}>编辑</button>
      <button onClick={() => onDelete(todo.id)}>删除</button>
    </div>
  );
}

export default TodoItem;

2.2 TodoList 组件

TodoList 组件用于渲染整个待办事项列表，它会接收一个 todos 数组作为属性，并渲染每一个 TodoItem。

// src/components/TodoList.js

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

function TodoList({ todos, onDelete, onEdit }) {
  return (
    <div className="todo-list">
      {todos.map((todo) => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onDelete={onDelete} 
          onEdit={onEdit} 
        />
      ))}
    </div>
  );
}

export default TodoList;

2.3 TodoForm 组件

TodoForm 组件用于添加新的待办事项或编辑已有的待办事项。我们会提供一个输入框，用户可以输入待办事项的内容。

// src/components/TodoForm.js

import React, { useState, useEffect } from 'react';

function TodoForm({ currentTodo, onSubmit }) {
  const [text, setText] = useState('');

  useEffect(() => {
    if (currentTodo) {
      setText(currentTodo.text);
    }
  }, [currentTodo]);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="请输入待办事项" 
        required
      />
      <button type="submit">{currentTodo ? '更新' : '添加'}</button>
    </form>
  );
}

export default TodoForm;

3. 管理应用状态

React 使用 useState 和 useEffect 钩子来管理组件的状态。我们需要在父组件 App 中管理整个应用的状态，包括待办事项的列表和当前正在编辑的待办事项。

// src/App.js

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import TodoForm from './components/TodoForm';

function App() {
  const [todos, setTodos] = useState([]);
  const [currentTodo, setCurrentTodo] = useState(null);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text }]);
  };

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

  const editTodo = (todo) => {
    setCurrentTodo(todo);
  };

  const updateTodo = (text) => {
    setTodos(
      todos.map((todo) =>
        todo.id === currentTodo.id ? { ...todo, text } : todo
      )
    );
    setCurrentTodo(null);
  };

  return (
    <div className="app">
      <h1>待办事项列表</h1>
      <TodoForm currentTodo={currentTodo} onSubmit={currentTodo ? updateTodo : addTodo} />
      <TodoList todos={todos} onDelete={deleteTodo} onEdit={editTodo} />
    </div>
  );
}

export default App;

4. 样式与布局

为了让应用更加美观，我们可以为组件添加一些简单的样式。可以在 src/index.css 文件中定义样式：

/* src/index.css */

.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.todo-list {
  margin-top: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

button {
  margin-left: 10px;
}

5. 运行和测试应用

接下来我们启动应用并进行测试。运行以下命令来启动开发服务器：

npm start

浏览器将打开一个页面，现在可以开始向待办事项列表添加、编辑和删除项目了。

使用React 实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项｜ 豆包MarsCode AI 刷题