今天,我参与了一个 React 项目,以创建一个简单但功能强大的待办事项列表应用程序。这个项目加深了我对 React hooks、状态管理和事件处理的理解,同时允许我通过向上或向下移动任务等附加功能来增强功能。
这是我所学到和实施的内容的详细说明。
1。设置组件
我构建了 ToDoList.jsx 以使用 useState 挂钩来管理任务。这使我能够动态更新和呈现任务列表。以下是管理任务的基本设置:
import React, { useState } from 'react'; export default function ToDoList() { const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(""); function handleInputChange(event) { setNewTask(event.target.value); // Enables us to see what we type } function addTask() { if (newTask.trim() !== "") { setTasks(t => [...t, newTask]); // Adds the new task to the task list setNewTask(""); // Resets the input field } } }
2。添加和删除任务
我学会了如何操纵状态来添加和删除任务。 addTask 函数在添加之前检查输入是否有效,而 deleteTask 则根据索引删除特定任务:
function deleteTask(index) { const updatedTasks = tasks.filter((_, i) => i !== index); // Removes the task at the given index setTasks(updatedTasks); }
3。上下移动任务
该项目的一个关键改进是实施任务重新排序。 moveTaskUp 和 moveTaskDown 函数根据索引重新排列任务:
function moveTaskUp(index) { if (index > 0) { const updatedTasks = [...tasks]; [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]]; setTasks(updatedTasks); } } function moveTaskDown(index) { if (index < tasks.length - 1) { const updatedTasks = [...tasks]; [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]]; setTasks(updatedTasks); } }
4。使用 CSS 添加样式
为了使应用程序具有视觉吸引力,我在 index.css 中应用了自定义样式。以下是一些亮点:
按钮样式:
button { font-size: 1.7rem; font-weight: bold; padding: 10px 20px; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.5s ease; } .add-button { background-color: hsl(125, 47%, 54%); } .add-button:hover { background-color: hsl(125, 47%, 44%); }
任务项样式:
li { font-size: 2rem; font-weight: bold; padding: 15px; background-color: hsl(0, 0%, 97%); margin-bottom: 10px; border: 3px solid hsla(0, 0%, 85%, 0.75); border-radius: 5px; display: flex; align-items: center; }
5。行动中完整的待办事项列表
以下是 ToDoList.jsx 组件中所有内容的组合方式:
return ( <div className='to-do-list'> <h1>To-Do List</h1> <div> <input type='text' placeholder='Enter a task...' value={newTask} onChange={handleInputChange} /> <button className='add-button' onClick={addTask}> Add </button> </div> <ol> {tasks.map((task, index) => ( <li key={index}> <span className='text'>{task}</span> <button className='delete-button' onClick={() => deleteTask(index)}>Delete</button> <button className='move-button' onClick={() => moveTaskUp(index)}>☝️</button> <button className='move-button' onClick={() => moveTaskDown(index)}>?</button> </li> ))} </ol> </div> );
一步一步
源代码
您可以在 GitHub 上访问该项目的完整源代码:
?待办事项列表 React 应用程序存储库
随意探索、分叉并为项目做出贡献!
以上是我的 React 之旅:第 28 天的详细内容。更多信息请关注PHP中文网其他相关文章!