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

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

引言

待办事项列表（Todo List）是前端开发中常见的一个实践项目，它不仅能够帮助我们理解前端框架的基本使用方法，还能够让我们深入学习状态管理、事件处理等前端核心概念。在本技术分析笔记中，我们将使用React框架来实现一个简单的待办事项列表，用户可以添加、编辑和删除待办事项。

技术栈

• React：一个用于构建用户界面的JavaScript库，特别适合构建复杂的单页应用。
• Create React App：一个官方支持的脚手架工具，用于快速搭建React应用。

项目结构

我们的待办事项列表应用将包含以下几个主要组件：

• App：最顶层组件，负责整体布局和状态管理。
• TodoList：展示待办事项列表的组件。
• TodoItem：单个待办事项的组件，包含编辑和删除功能。
• AddTodo：添加新待办事项的组件。

实现步骤

1. 初始化项目

使用Create React App初始化项目：

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

2. 设计组件

App组件

App组件将使用React的useState钩子来管理待办事项列表的状态。

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

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

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

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

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

  return (
    <div>
      <AddTodo onAddTodo={addTodo} />
      <TodoList todos={todos} onDeleteTodo={deleteTodo} onEditTodo={editTodo} />
    </div>
  );
}

export default App;

AddTodo组件

AddTodo组件负责添加新的待办事项。

import React, { useState } from 'react';

function AddTodo({ onAddTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    onAddTodo({ id: Date.now(), text: value });
    setValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
}

export default AddTodo;

TodoList组件

TodoList组件负责展示待办事项列表，并处理删除和编辑事件。

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

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

export default TodoList;

TodoItem组件

TodoItem组件负责展示单个待办事项，并提供编辑和删除功能。

import React, { useState } from 'react';

function TodoItem({ todo, onDeleteTodo, onEditTodo }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedValue, setEditedValue] = useState(todo.text);

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

  const handleSave = () => {
    onEditTodo(todo.id, { ...todo, text: editedValue });
    setIsEditing(false);
  };

  const handleDelete = () => {
    onDeleteTodo(todo.id);
  };

  if (isEditing) {
    return (
      <li>
        <input
          type="text"
          value={editedValue}
          onChange={(e) => setEditedValue(e.target.value)}
          onBlur={handleSave}
        />
        <button onClick={handleSave}>Save</button>
      </li>
    );
  }

  return (
    <li>
      {todo.text}
      <button onClick={handleEdit}>Edit</button>
      <button onClick={handleDelete}>Delete</button>
    </li>
  );
}

export default TodoItem;

3. 运行和测试

运行应用并添加、编辑、删除待办事项，确保所有功能正常工作。

结论

通过实现一个简单的待办事项列表，我们不仅学习了React的基本使用方法，还深入理解了组件化开发、状态管理和事件处理等前端开发的核心概念。这个项目可以作为学习React和其他前端技术的良好起点。