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

使用React来实现一个简单的待办事项列表是一个很好的练习，可以帮助你了解React组件的创建、状态管理、事件处理等方面的基本概念。在这个示例中，我将指导你如何构建一个具有添加、编辑和删除待办事项功能的简单应用程序。

1. 设置项目

首先，确保你已经安装了Node.js和npm。然后，通过以下步骤创建一个新的React应用程序：

打开命令行或终端。 进入你想要创建项目的目录，例如：cd my-todo-app。 运行以下命令来创建新的React应用程序：

npx create-react-app my-todo-app

进入项目目录：cd my-todo-app。

2. 创建待办事项组件

在src文件夹下创建一个新的文件夹components，然后在其中创建一个名为TodoItem.js的文件。在该文件中，编写一个简单的待办事项组件：

import React from 'react';

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

export default TodoItem;

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

继续在components文件夹中创建一个名为TodoList.js的文件。在该文件中，编写一个待办事项列表组件：

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

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

export default TodoList;

4. 创建主应用程序组件

现在，我们将创建一个主应用程序组件，用于管理待办事项的状态、添加、编辑和删除功能。

在src文件夹下创建一个名为App.js的文件，并编写以下代码：

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

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: '学习React' },
    { id: 2, text: '编写示例应用' },
  ]);
  const [editingTodo, setEditingTodo] = useState(null);

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

  const handleEditTodo = (editedTodo) => {
    const updatedTodos = todos.map((todo) =>
      todo.id === editedTodo.id ? editedTodo : todo
    );
    setTodos(updatedTodos);
    setEditingTodo(null);
  };

  const handleDeleteTodo = (todoId) => {
    const updatedTodos = todos.filter((todo) => todo.id !== todoId);
    setTodos(updatedTodos);
    setEditingTodo(null);
  };

  return (
    <div className="app">
      <h1>待办事项列表</h1>
      <TodoList
        todos={todos}
        onEdit={(todo) => setEditingTodo(todo)}
        onDelete={handleDeleteTodo}
      />
      <div className="add-todo">
        <h2>添加待办事项</h2>
        <input
          type="text"
          placeholder="输入待办事项"
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              handleAddTodo(e.target.value);
              e.target.value = '';
            }
          }}
        />
      </div>
      {editingTodo && (
        <div className="edit-todo">
          <h2>编辑待办事项</h2>
          <input
            type="text"
            defaultValue={editingTodo.text}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                handleEditTodo({
                  ...editingTodo,
                  text: e.target.value,
                });
                setEditingTodo(null);
              }
            }}
          />
        </div>
      )}
    </div>
  );
};

export default App;

5. 样式化应用程序 在src文件夹下创建一个名为App.css的文件，并添加一些基本的CSS样式来美化你的应用程序。

.app {
  text-align: center;
  margin: 2rem;
}

.todo-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  margin-bottom: 0.5rem;
}

.add-todo,
.edit-todo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  margin-top: 0.5rem;
}

6. 总结

通过以上步骤，你已经成功地使用React构建了一个简单的待办事项列表应用程序。你学会了创建React组件、管理组件状态、处理事件以及简单的CSS样式化。