轻松管理日常任务：React实现个性化的待办事项清单

发布时间：2025-01-06 21:50

使用待办事项清单，管理日常任务 #生活技巧# #工作学习技巧# #工作习惯优化#

在现代快节奏的生活中，有效地管理日常任务是提高生活和工作效率的关键。React作为一款强大的前端框架，可以帮助开发者构建出高度可定制和交互式的待办事项清单应用。以下将详细介绍如何使用React来实现一个个性化的待办事项清单。

一、项目初始化

首先，确保你已经安装了Node.js和npm。然后，按照以下步骤创建一个新的React项目：

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

二、项目结构设计

为了保持项目的整洁和可维护性，我们需要创建一个合理的项目结构。以下是项目的基本目录结构：

三、组件开发

1. TodoItem组件

TodoItem.js 负责显示单个待办事项，并提供一个勾选按钮来标记任务完成。

import React from 'react'; const TodoItem = ({ todo, onToggleComplete }) => { return ( <li> <input type="checkbox" checked={todo.completed} onChange={() => onToggleComplete(todo.id)} /> {todo.text} </li> ); }; export default TodoItem;

2. TodoList组件

TodoList.js 负责渲染所有待办事项，并管理待办事项的状态。

import React from 'react'; import TodoItem from './TodoItem'; const TodoList = ({ todos, onToggleComplete }) => { return ( <ul> {todos.map(todo => ( <TodoItem key={todo.id} todo={todo} onToggleComplete={onToggleComplete} /> ))} </ul> ); }; export default TodoList;

3. AddTodo组件

AddTodo.js 负责接收用户输入的新待办事项，并将其添加到待办事项列表中。

import React, { useState } from 'react'; const AddTodo = ({ onAddTodo }) => { const [text, setText] = useState(''); const handleSubmit = e => { e.preventDefault(); if (!text) return; onAddTodo(text); setText(''); }; return ( <form onSubmit={handleSubmit}> <input type="text" value={text} onChange={e => setText(e.target.value)} placeholder="Add a new todo" /> <button type="submit">Add</button> </form> ); }; export default AddTodo;

4. App组件

App.js 是整个应用的根组件，它负责管理待办事项的状态，并作为其他组件的容器。

import React, { useState } from 'react'; import TodoList from './components/TodoList'; import AddTodo from './components/AddTodo'; const App = () => { const [todos, setTodos] = useState([]); const addTodo = text => { setTodos([...todos, { id: todos.length, text, completed: false }]); }; const toggleComplete = id => { setTodos( todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) ); }; return ( <div> <AddTodo onAddTodo={addTodo} /> <TodoList todos={todos} onToggleComplete={toggleComplete} /> </div> ); }; export default App;