在这个教程中，我们将构建一个基于React的待办事项列表应用。这个应用将允许用户添加、编辑和删除待办事项，同时还会显示已完成和未完成的待办事项。我们将使用React Hooks、组件、以及本地状态管理来构建这个应用。
- 设置项目
首先，使用create-react-app创建一个新的React项目：
npx create-react-app todo-app cd todo-app
- 创建主要组件
在src/components目录下创建TodoList.js、TodoItem.js和TodoForm.js等组件。
TodoList.js (主要组件，展示待办事项列表)
import React, { useState } from 'react'; import TodoItem from './TodoItem'; import TodoForm from './TodoForm'; function TodoList() { const [todos, setTodos] = useState([]); const handleAddTodo = (todoText) => { const newTodo = { id: Date.now(), text: todoText, completed: false, }; setTodos([...todos, newTodo]); }; const handleToggleTodo = (id) => { setTodos(todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))); }; const handleDeleteTodo = (id) => { setTodos(todos.filter((todo) => todo.id !== id)); }; return ( <div className="todo-list"> <h2>待办事项列表</h2> <TodoForm onAddTodo={handleAddTodo} /> <ul> {todos.map((todo) => ( <TodoItem key={todo.id} todo={todo} onToggleTodo={handleToggleTodo} onDeleteTodo={handleDeleteTodo} /> ))} </ul> </div> ); } export default TodoList;
TodoItem.js (待办事项组件)
import React from 'react'; function TodoItem({ todo, onToggleTodo, onDeleteTodo }) { return ( <li className={`todo-item ${todo.completed ? 'completed' : ''}`}> <input type="checkbox" checked={todo.completed} onChange={() => onToggleTodo(todo.id)} /> <span className="todo-text">{todo.text}</span> <button className="delete-btn" onClick={() => onDeleteTodo(todo.id)}> 删除 </button> </li> ); } export default TodoItem;
TodoForm.js (待办事项表单组件)
import React, { useState } from 'react'; function TodoForm({ onAddTodo }) { const [input, setInput] = useState(''); const handleInputChange = (e) => { setInput(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); if (input.trim()) { onAddTodo(input); setInput(''); } }; return ( <form onSubmit={handleSubmit}> <input type="text" value={input} onChange={handleInputChange} placeholder="添加待办事项" /> <button type="submit">添加</button> </form> ); } export default TodoForm;
- 添加样式
在src目录下创建App.css（或index.css，取决于你的项目设置），并添加以下样式：
/* App.css */ .todo-list { max-width: 400px; margin: 0 auto; padding: 20px; } .todo-list h2 { text-align: center; } .todo-list ul { list-style-type: none; padding: 0; } .todo-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #ddd; } .todo-item.completed { color: #999; text-decoration: line-through; } .todo-item input[type="checkbox"] { margin-right: 10px; } .todo-item .todo-text { flex: 1; } .todo-item .delete-btn { margin-left: auto; background-color: transparent; border: none; color: #999; cursor: pointer; font-size: 0.8em; } .todo-item .delete-btn:hover { color: #666; } /* 样式可能需要根据具体布局和设计进行调整 */
- 集成到App组件
在src/App.js中，我们将TodoList组件作为根组件引入并渲染。
import React from 'react'; import './App.css'; // 确保导入了样式文件 import TodoList from './components/TodoList'; function App() { return ( <div className="App"> <TodoList /> </div> ); } export default App;
- 启动项目
回到终端或命令提示符，运行以下命令来启动你的React应用：
npm start
现在，你的待办事项列表应用应该可以在浏览器中运行了。你可以添加新的待办事项，点击复选框来标记它们为已完成，以及点击“删除”按钮来删除待办事项。
- 扩展功能
- 持久化存储：使用localStorage或IndexedDB来保存待办事项，以便在刷新页面或重新打开应用时恢复它们。
- 拖放排序：允许用户通过拖放来重新排序待办事项。
- 日期和时间：为每个待办事项添加截止日期或提醒时间。
- 优先级：添加待办事项的优先级，如高、中、低。
- 过滤：添加过滤功能，允许用户根据完成状态或优先级来查看待办事项。
- 响应式设计：确保应用在不同设备和屏幕尺寸上都能良好地工作。
- 总结
在这个教程中，我们构建了一个基于React的待办事项列表应用。我们使用了React Hooks、组件、本地状态管理以及CSS样式来构建这个应用。这个应用是一个很好的起点，你可以根据自己的需求进一步扩展和定制它。React的灵活性和可扩展性使得构建复杂的前端应用变得相对简单和高效。
