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

当谈到构建交互式用户界面时，React 是一个极佳的选择。它是一个流行的 JavaScript 库，专门用于构建可维护、高效和可扩展的前端应用程序。在本教程中，我将向您展示如何使用 React 创建一个简单的待办事项列表应用，其中用户可以添加、编辑和删除待办事项。

步骤 1：设置项目

首先，确保您已经安装了 Node.js 和 npm（Node 包管理器）。如果没有安装，您可以从官方网站下载并安装它们。

打开终端并创建一个新的项目文件夹，然后执行以下命令：

mkdir react-todo-list
cd react-todo-list
npm init -y
npm install react react-dom

步骤 2：创建组件

在项目文件夹中，创建一个名为 src 的文件夹。在 src 文件夹中，创建以下三个文件：

1. App.js：主应用组件，用于呈现待办事项列表和处理添加、编辑和删除操作。
2. TodoItem.js：代表单个待办事项的组件，用于渲染和编辑待办事项。
3. index.js：应用程序的入口点，用于将主应用组件呈现在页面上。

步骤 3：编写代码

App.js

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

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

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, { text: newTodo, isEditing: false }]);
      setNewTodo('');
    }
  };

  const editTodo = (index, newText) => {
    const updatedTodos = [...todos];
    updatedTodos[index].text = newText;
    setTodos(updatedTodos);
  };

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add a new todo..."
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <TodoItem
            key={index}
            todo={todo}
            onEdit={(newText) => editTodo(index, newText)}
            onDelete={() => deleteTodo(index)}
          />
        ))}
      </ul>
    </div>
  );
}

export default App;

TodoItem.js

import React, { useState } from 'react';

function TodoItem({ todo, onEdit, onDelete }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedText, setEditedText] = useState(todo.text);

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

  const handleSaveClick = () => {
    if (editedText.trim() !== '') {
      onEdit(editedText);
      setIsEditing(false);
    }
  };

  return (
    <li>
      {isEditing ? (
        <>
          <input
            type="text"
            value={editedText}
            onChange={(e) => setEditedText(e.target.value)}
          />
          <button onClick={handleSaveClick}>Save</button>
        </>
      ) : (
        <>
          {todo.text}
          <button onClick={handleEditClick}>Edit</button>
          <button onClick={onDelete}>Delete</button>
        </>
      )}
    </li>
  );
}

export default TodoItem;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

步骤 4：运行应用

现在，您已经完成了所有代码。在项目文件夹中运行以下命令来启动应用：

npm start

您应该能够在浏览器中看到一个简单的待办事项列表应用，您可以添加、编辑和删除待办事项。

结论

恭喜您！您已经成功地创建了一个使用 React 构建的待办事项列表应用。在本教程中，我们学习了如何创建主应用组件、待办事项组件以及如何处理添加、编辑和删除操作。通过不断练习和学习，您可以进一步扩展这个应用，添加更多功能和样式，使其更加强大和吸引人。