使用React实现待办事项列表应用：简单易懂的增删改操作

React作为前端框架的代表，为开发者提供了一种高效、组件化的方式来构建用户界面。在这篇文章中，我们将使用React实现一个简单的待办事项列表应用，用户可以通过该应用进行添加、编辑和删除待办事项，展示了React在实际项目中的应用。

1. 初始化项目

首先，我们需要创建一个新的React项目。你可以使用create-react-app来快速搭建一个基本的React应用：

sh

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

2. 创建待办事项组件

在src文件夹中，我们创建一个TodoItem.js文件，用来定义单个待办事项的组件。

jsx

import React, { useState } from 'react';

const TodoItem = ({ item, onEdit, onDelete }) => { const [isEditing, setIsEditing] = useState(false); const [editedText, setEditedText] = useState(item.text);

const handleEditClick = () => { setIsEditing(true); };

const handleSaveClick = () => { onEdit(item.id, editedText); setIsEditing(false); };

return (

export default TodoItem;

3. 创建待办事项列表组件

接下来，我们创建一个TodoList.js文件，用来定义整个待办事项列表的组件。

jsx

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

const TodoList = () => { const [items, setItems] = useState([]); const [newItemText, setNewItemText] = useState('');

const handleAddClick = () => { if (newItemText) { setItems([...items, { id: Date.now(), text: newItemText }]); setNewItemText(''); } };

const handleEdit = (itemId, newText) => { const updatedItems = items.map((item) => item.id === itemId ? { ...item, text: newText } : item ); setItems(updatedItems); };

const handleDelete = (itemId) => { const filteredItems = items.filter((item) => item.id !== itemId); setItems(filteredItems); };

return (

export default TodoList;

4. 渲染待办事项列表

在src文件夹中的App.js文件，我们可以使用TodoList组件来渲染整个待办事项列表应用。

jsx

import React from 'react'; import TodoList from './TodoList'; import './App.css';

function App() { return (

export default App;

5. 运行应用

运行应用，并在浏览器中打开http://localhost:3000，你将会看到一个简单的待办事项列表应用。你可以通过输入待办事项内容、点击编辑按钮修改事项、以及点击删除按钮删除事项。

6. 总结

通过这个简单的实例，我们探索了如何使用React构建一个待办事项列表应用。我们创建了两个组件：TodoItem用于表示单个待办事项，TodoList用于管理待办事项列表。这个实例展示了React的组件化、状态管理以及事件处理等特性，帮助我们更好地理解React在实际项目中的应用。通过对比分析和实际操作，我们可以更加深入地掌握React的使用，创造出更加丰富和高效的前端应用。