以下是使用React实现一个简单的待办事项列表（包含添加、编辑和删除功能）的示例代码：
- 创建项目并引入必要依赖
首先确保你已经安装了create-react-app工具，通过命令npx create-react-app todo-list创建一个React项目，然后进入项目目录cd todo-list。
- 编写组件代码
在src目录下，创建TodoList.js文件，代码如下： import React, { useState } from 'react';
const TodoList = () => { // 状态管理待办事项列表，初始为空数组 const [todos, setTodos] = useState([]); // 用于输入新待办事项的文本状态 const [newTodoText, setNewTodoText] = useState(''); // 用于编辑时的待办事项文本状态及索引 const [editTodoText, setEditTodoText] = useState(''); const [editIndex, setEditIndex] = useState(-1);
// 添加待办事项的函数 const addTodo = () => { if (newTodoText.trim()!== '') { setTodos([...todos, newTodoText]); setNewTodoText(''); } };
// 编辑待办事项的函数，设置编辑状态相关值 const editTodo = (index) => { setEditTodoText(todos[index]); setEditIndex(index); };
// 更新编辑后的待办事项内容 const updateTodo = () => { if (editTodoText.trim()!== '') { const updatedTodos = [...todos]; updatedTodos[editIndex] = editTodoText; setTodos(updatedTodos); setEditTodoText(''); setEditIndex(-1); } };
// 删除待办事项的函数 const deleteTodo = (index) => { const updatedTodos = todos.filter((_, i) => i!== index); setTodos(updatedTodos); };
return (
待办事项列表
<input type="text" placeholder="添加新的待办事项" value={newTodoText} onChange={(e) => setNewTodoText(e.target.value)} /> 添加-
{todos.map((todo, index) => (
- {editIndex === index? ( <> <input type="text" value={editTodoText} onChange={(e) => setEditTodoText(e.target.value)} /> 更新 </> ) : ( <> {todo} <button onClick={() => editTodo(index)}>编辑 <button onClick={() => deleteTodo(index)}>删除 </> )} ))}
export default TodoList; 3. 在App.js中使用该组件
修改App.js文件内容如下： import React from 'react'; import TodoList from './TodoList';
function App() { return (
export default App; 这样就实现了一个简单的具备添加、编辑和删除功能的待办事项列表，你可以通过npm start启动项目在浏览器中查看效果并进行相应操作了。
请注意，这只是一个很基础的示例，实际应用中还可以进行更多的样式美化、数据持久化等拓展操作。
