待办事项列表｜ 青训营

待办事项列表是一个用于记录和管理需要完成的任务或事情的工具。它通常以列表的形式展示，每个列表项代表一个待办事项。待办事项列表通常用来帮助人们跟踪任务、提醒重要事项并组织日常活动。这种列表可以有各种功能，例如添加、删除、编辑、标记完成等。它可以用于个人任务管理、项目管理、日程安排、购物清单等，使用户能够更好地组织和规划他们的时间和工作。通过使用待办事项列表，人们可以更高效地处理任务和提高生产力。 import React, { useState } from 'react';

const TodoList = () => { const [todos, setTodos] = useState([]); const [value, setValue] = useState('');

const handleInputChange = (e) => { setValue(e.target.value); };

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

const handleDeleteTodo = (index) => { const updatedTodos = [...todos]; updatedTodos.splice(index, 1); setTodos(updatedTodos); };

return (

export default TodoList; 在这个例子中，我们首先使用useState钩子定义了两个状态变量：todos和value。todos用于存储待办事项列表，value用于存储输入框中的值。

handleInputChange函数用于更新value状态变量，让输入框的值跟随用户的输入变化。

handleAddTodo函数用于添加待办事项到列表中。它会首先检查输入框的值是否为空，如果不为空，就使用setTodos更新todos状态变量，并清空输入框的值。

handleDeleteTodo函数用于删除待办事项。它接收一个索引参数，通过创建一个新的数组并使用splice方法删除指定索引的元素，然后使用setTodos更新todos状态变量。

在return部分，我们渲染了一个标题、一个输入框、一个添加按钮和一个待办事项列表。我们使用map方法遍历todos数组，并为每一个待办事项创建一个列表项，包含待办事项的文本和一个删除按钮。点击删除按钮会调用handleDeleteTodo函数并传递相应的索引值。

最后，通过export default将TodoList组件导出供其他组件使用。

你可以在你的React应用程序中使用TodoList组件来显示一个简单的待办事项列表。