使用React实现一个简单的待办事项列表：用户可以添加、编辑和删除待办事项 | 青训营

我要7夜宵
171 阅读3分钟

在现代生活中，人们经常需要记录自己的待办事项，以便更好地组织自己的时间和任务。为了帮助用户管理待办事项，我们可以使用React来创建一个简单而功能强大的待办事项列表。在本篇博客中，我将指导你如何使用React来实现这个应用。

首先，我们需要设置React开发环境。你可以使用Create React App来快速搭建一个React项目。运行下面的命令来创建一个新的React应用程序：

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

接下来，让我们打开src/App.js文件，并将其清空。我们将在这个文件中构建整个应用程序。

首先，我们需要创建一个用于显示待办事项的组件。在App.js中，添加以下代码：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState('');

  const handleAddTodo = () => {
    if (task.trim() !== '') {
      setTodos([...todos, task]);
      setTask('');
    }
  };

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

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <div>
      <TodoList />
    </div>
  );
}

export default App;

上面的代码中，我们定义了一个TodoList组件，其中有两个state：todos和task。todos用于存储待办事项列表，task用于存储用户在输入框中输入的任务。

handleAddTodo函数用于添加新的待办事项。它首先检查用户输入的任务是否为空，如果不为空，则将任务添加到todos数组中，并清空输入框。

handleDeleteTodo函数用于删除待办事项。它接收一个索引值作为参数，然后使用filter函数从todos数组中过滤掉相应索引的待办事项。

在组件的返回部分，我们渲染了一个标题、一个输入框、一个添加按钮以及一个待办事项列表。每个待办事项都包含一个删除按钮，点击该按钮会调用handleDeleteTodo函数，并传入相应的索引值。

接下来，我们需要在src/App.js中引入TodoList组件，并将其渲染到屏幕上。在App函数的返回部分，添加以下代码：

function App() {
  return (
    <div>
      <TodoList />
    </div>
  );
}

现在，我们已经完成了一个简单的待办事项列表应用程序。运行以下命令来启动应用程序：

npm start

成功启动后，你将在浏览器中看到一个输入框和一个添加按钮。你可以在输入框中输入任务，并点击添加按钮来添加新的待办事项。已添加的待办事项将显示在下方的列表中，每条任务的旁边都有一个删除按钮，你可以点击它来删除相应的待办事项。

在这个简单的示例中，我们使用了React的useState钩子来管理状态。useState允许我们在函数组件中使用状态，并在状态发生改变时重新渲染组件。

此外，我们还使用了用户输入和事件处理函数来实现添加和删除待办事项的功能。

总结：

在本篇博客中，我们学习了如何使用React来构建一个简单的待办事项列表应用程序。通过使用React的useState钩子，我们能够实现增加、编辑和删除待办事项的功能。这个应用程序可以帮助用户更好地组织自己的任务，并提高工作效率。

avatar
文章
阅读
粉丝