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

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

在现代Web开发中，React因其组件化和声明式编程而广受欢迎。React是一个用于构建用户界面的开源JavaScript库，由Facebook开发并维护。它于2013年首次发布，自那时以来已经成为前端开发中最流行的库之一。React的核心特点是组件化架构、声明式编程范式和高效的DOM（文档对象模型）更新机制。下面，我将通过一个简单的示例来展示如何使用React来实现一个待办事项列表，该列表允许用户添加、编辑和删除待办事项。

理解待办事项列表的需求

待办事项列表应用需要满足以下基本功能：

• 添加待办事项：用户可以输入待办事项的描述，并将其添加到列表中。
• 编辑待办事项：用户可以对已存在的待办事项进行编辑，更新其描述。
• 删除待办事项：用户可以删除不再需要的待办事项。

1. 创建React应用

首先，我们需要创建一个新的React应用。如果你还没有安装Create React App，可以通过以下命令安装：

bash
npx create-react-app todo-list
cd todo-list

2. 设计React组件

为了实现上述功能，我们可以将待办事项列表应用分为以下几个组件：

• TodoApp：主组件，负责管理应用的状态和逻辑。
• AddTodo：用于添加新待办事项的表单组件。
• TodoList：展示待办事项列表的组件。
• TodoItem：单个待办事项项的组件，包含编辑和删除按钮。

目录结构如下：

3. 实现TodoApp组件

TodoApp组件是整个应用的核心，它使用useState钩子来管理待办事项列表的状态。

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

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [currentTodo, setCurrentTodo] = useState('');

  const addTodo = () => {
    if (currentTodo.trim()) {
      setTodos([...todos, { id: Date.now(), text: currentTodo, isEditing: false }]);
      setCurrentTodo('');
    }
  };

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

  const editTodo = (id, text) => {
    setTodos(todos.map(todo => todo.id === id ? { ...todo, text, isEditing: false } : todo));
  };

  return (
    <div>
      <AddTodo currentTodo={currentTodo} setCurrentTodo={setCurrentTodo} addTodo={addTodo} />
      <TodoList todos={todos} deleteTodo={deleteTodo} editTodo={editTodo} />
    </div>
  );
}

export default TodoApp;

4. 实现AddTodo组件

AddTodo组件是一个简单的表单，允许用户输入待办事项的描述，并添加到列表中。

import React, { useState } from 'react';

function AddTodo({ currentTodo, setCurrentTodo, addTodo }) {
  return (
    <div>
      <input
        type="text"
        value={currentTodo}
        onChange={(e) => setCurrentTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
}

export default AddTodo;

5. 实现TodoList和TodoItem组件

TodoList组件负责渲染整个待办事项列表，而TodoItem组件则负责渲染单个待办事项项，并提供编辑和删除功能。

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

function TodoList({ todos, deleteTodo, editTodo }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          deleteTodo={deleteTodo}
          editTodo={editTodo}
        />
      ))}
    </ul>
  );
}

export default TodoList;

// TodoItem组件
function TodoItem({ todo, deleteTodo, editTodo }) {
  const [isEditing, setIsEditing] = React.useState(false);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = (e) => {
    editTodo(todo.id, e.target.value);
    setIsEditing(false);
  };

  return (
    <li>
      {isEditing ? (
        <input type="text" defaultValue={todo.text} onBlur={handleSave} />
      ) : (
        <>
          {todo.text}
          <button onClick={handleEdit}>Edit</button>
          <button onClick={() => deleteTodo(todo.id)}>Delete</button>
        </>
      )}
    </li>
  );
}

export default TodoItem;

6.实现效果如下

7. 总结

通过上述步骤，我实现了一个简单的待办事项列表应用。用户可以添加新的待办事项，点击编辑按钮修改待办事项内容，以及点击删除按钮移除待办事项。这个应用展示了React在状态管理和组件化方面的强大能力，同时也提供了一个实际的案例，展示了如何使用React来构建交互式的Web应用。这个应用虽然简单，但它包含了React应用开发中的许多基本概念，如组件、状态、事件处理等，是学习React的一个很好的起点。