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

简介

这篇笔记中将展示如何使用React构建一个简单的待办事项列表应用，使用户能够添加、编辑和删除待办事项。这个项目涵盖了react的基本概念，包括组件创建、状态管理和事件处理。

1. 创建项目

首先，确保您的开发环境中已经安装了Node.js和npm（Node Package Manager）。然后，通过以下命令创建一个新的React应用：

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

2. 组件创建

在 src 文件夹中，我们将创建三个主要的组件：TodoApp、TodoList 和 TodoItem。

• TodoApp 组件将整合所有的功能，包括添加、编辑和删除待办事项。
• TodoList 组件将负责显示待办事项列表。
• TodoItem 组件将展示单个待办事项，并提供编辑和删除选项。

在 src 文件夹中，创建以下组件：

TodoApp.js:

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

class TodoApp extends Component {
  render() {
    return (
      <div>
        <h1>Todo App</h1>
        <TodoList />
      </div>
    );
  }
}

export default TodoApp;

TodoList.js:

import React, { Component } from 'react';
import TodoItem from './TodoItem';

class TodoList extends Component {
  render() {
    return (
      <ul>
        <TodoItem />
        {/* More TodoItems */}
      </ul>
    );
  }
}

export default TodoList;

TodoItem.js:

import React, { Component } from 'react';

class TodoItem extends Component {
  render() {
    return (
      <li>
        {/* Todo item content */}
      </li>
    );
  }
}

export default TodoItem;

3. 状态管理

在 TodoApp 组件的状态中，我们将维护待办事项的列表。初始时，这个列表可以为空。

4. 添加待办事项

在 TodoApp 组件中，我们将创建一个输入框和添加按钮。当用户在输入框中键入内容并点击添加按钮时，我们将在状态中更新待办事项列表。 在 TodoApp.js 中添加输入框和添加按钮：

class TodoApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };
  }

  addTask = (task) => {
    this.setState(prevState => ({
      tasks: [...prevState.tasks, task]
    }));
  }

  render() {
    return (
      <div>
        <h1>Todo App</h1>
        <TodoList tasks={this.state.tasks} />
        <input type="text" />
        <button onClick={() => this.addTask("New Task")}>Add Task</button>
      </div>
    );
  }
}

5. 显示待办事项列表

在 TodoList 组件中，我们将根据状态中的待办事项列表，使用 map 函数渲染每个 TodoItem 组件。 在 TodoList.js 中使用 map 渲染待办事项：

class TodoList extends Component {
  // ...

  render() {
    const { tasks } = this.props;
    return (
      <ul>
        {tasks.map((task, index) => (
          <TodoItem key={index} task={task} />
        ))}
      </ul>
    );
  }
}

6. 编辑和删除待办事项

在 TodoItem 组件中，我们将为每个待办事项提供编辑和删除选项。通过点击编辑按钮，我们将展示一个输入框，允许用户修改待办事项的内容。删除按钮将触发待办事项从状态中被删除。 在 TodoItem.js 中实现编辑和删除功能：

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false,
      editedDescription: props.task
    };
  }

  handleEditClick = () => {
    this.setState({ editing: true });
  }

  handleEditChange = (event) => {
    this.setState({ editedDescription: event.target.value });
  }

  handleSaveClick = () => {
    // Save edited description and exit edit mode
    this.setState({ editing: false });
  }

  handleDeleteClick = () => {
    // Delete the task
  }

  render() {
    // ...
  }
}

7. 实现编辑功能

在 TodoItem 组件中，我们将为编辑功能创建一个状态。点击编辑按钮时，我们将切换到编辑模式，允许用户修改待办事项内容。

8. 实现删除功能

在 TodoItem 组件中，我们将为删除按钮添加一个点击事件，以便用户可以删除待办事项。点击删除按钮后，我们将从状态中移除相应的待办事项。

总结与扩展

上述步骤可以成功地创建一个具有基本功能的待办事项列表应用。开发者可以进一步扩展应用，例如添加状态持久化、样式美化、优化用户体验等。这个项目让我更深入地了解了React的核心概念，为我在更复杂的应用中打下了坚实的基础。通过实际动手，我更好地理解了React的使用和开发流程。