react实现待办事项列表 ｜ 青训营

React是一个用于构建用户界面的JavaScript库。它通过组件化的方式将页面拆分成独立的、可复用的部分，使得开发者可以更有效地管理和维护复杂的UI。

在待办事项列表的实现中，使用了React函数式组件和React Hooks来管理状态和处理用户交互。以下是代码的解释：

1. 首先，我们引入了React库，并从react模块中导入了useState钩子。useState钩子允许我们在函数组件中定义状态变量。
2. 接下来，定义了一个名为TodoList的函数组件。这个组件包含了待办事项列表的整体结构和逻辑。
3. 在组件内部，使用useState钩子创建了两个状态变量：todos和inputValue。todos用于存储待办事项的数组，inputValue用于存储用户在输入框中输入的文本。
4. 在页面渲染部分，使用JSX语法编写了待办事项列表的HTML结构。其中包括一个标题、一个输入框、一个添加按钮和一个待办事项的列表。
5. 输入框和按钮都绑定了相应的事件处理函数。输入框的值通过value属性与inputValue状态变量进行绑定，当输入框的值发生变化时，会触发onChange事件处理函数来更新inputValue的值。
6. 添加按钮绑定了addTodo事件处理函数，当按钮被点击时，会调用addTodo来将新的待办事项添加到todos数组中。
7. 待办事项列表通过todos.map方法遍历todos数组，并为每个待办事项渲染一个li元素。每个li元素包含一个输入框和一个删除按钮。
8. 输入框绑定了editTodo事件处理函数，当输入框的值发生变化时，会调用editTodo来更新相应待办事项的文本。
9. 删除按钮绑定了deleteTodo事件处理函数，当按钮被点击时，会调用deleteTodo来从todos数组中移除相应的待办事项。
10. 最后，通过export default将TodoList组件导出，使得其他组件可以引入和使用该组件。

以上就可以实现一个简单的待办事项列表功能。用户可以在输入框中添加新的待办事项，编辑已有的待办事项文本，并通过删除按钮删除待办事项。所有的操作都会在界面上实时更新。

import React, { useState } from 'react';

function TodoList() { const [todos, setTodos] = useState([]); const [inputValue, setInputValue] = useState('');

// 添加待办事项 const addTodo = () => { if (inputValue.trim() !== '') { const newTodo = { id: Date.now(), text: inputValue }; setTodos(prevTodos => [...prevTodos, newTodo]); setInputValue(''); } };

// 编辑待办事项 const editTodo = (id, newText) => { const updatedTodos = todos.map(todo => { if (todo.id === id) { return { ...todo, text: newText }; } return todo; }); setTodos(updatedTodos); };

// 删除待办事项 const deleteTodo = (id) => { const updatedTodos = todos.filter(todo => todo.id !== id); setTodos(updatedTodos); };

return (

export default TodoList;