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

React是一个由Facebook开发和维护的开源JavaScript库，用于构建用户界面或UI组件。React被设计为可复用的组件，这意味着你可以将UI分割成一些独立的、可复用的部分，并且独立考虑每个部分。在这篇文章中，我们将使用React创建一个简单的待办事项列表（To-Do List）应用。这个列表将支持以下功能：

添加待办事项
编辑待办事项
删除待办事项

开始之前

在开始之前，请确保您的计算机上已经安装了Node.js和npm（Node包管理器）。如果没有，您可以从Node.js官网下载和安装。

创建React应用

首先，我们将使用Create React App，这是一个官方提供的用于快速搭建React应用的脚手架工具。

打开终端，运行以下命令：

bashCopy code
npx create-react-app todo-list

这将创建一个名为todo-list的新目录，并且在该目录中安装所有必要的依赖项。

进入应用的文件夹：

bashCopy code
cd todo-list

编写代码

App.js

App.js是应用的入口文件。打开src/App.js文件并替换其内容。

我们首先导入React和useState Hook。然后定义了App组件。

在App组件中，我们定义了一些状态变量：

todos：一个数组，用于存储所有的待办事项。
newTodo：一个字符串，用于存储新待办事项的文本。

然后，我们定义了一些函数：

addTodo：这个函数将新的待办事项添加到todos数组中。
editTodo：这个函数将允许我们编辑现有的待办事项。
updateTodoText：这个函数将更新待办事项的文本。
deleteTodo：这个函数将删除一个待办事项。

在return语句中，我们返回了JSX，它描述了我们的UI。

我们有一个输入框，用于输入新的待办事项，一个按钮，用于添加新的待办事项，以及一个列表，用于显示所有的待办事项。

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

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

  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: newTodo, editable: false }]);
    setNewTodo('');
  };

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

  const updateTodoText = (id, newText) => {
    const updatedTodos = todos.map((todo) =>
      todo.id === id ? { ...todo, text: newText } : todo
    );
    setTodos(updatedTodos);
  };

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

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      <input
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="新的待办事项"
      />
      <button onClick={addTodo}>添加</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.editable ? (
              <input
                value={todo.text}
                onChange={(e) => updateTodoText(todo.id, e.target.value)}
              />
            ) : (
              todo.text
            )}
            <button onClick={() => editTodo(todo.id)}>
              {todo.editable ? '完成' : '编辑'}
            </button>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

App.css

接下来，我们可以添加一些简单的CSS来美化这个应用。打开src/App.css并替换其内容。

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

button {
  margin-left: 0.5rem;
}

试运行

保存所有更改并运行应用：

npm start

这将启动开发服务器，并自动在默认浏览器中打开应用。

现在，应该可以在浏览器中看到待办事项列表应用。可以添加、编辑和删除待办事项。

总结

在这篇文章中，我们使用React创建了一个简单的待办事项列表应用，实现了添加、编辑和删除待办事项的功能。

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