首页 > web前端 > js教程 > 我的 React 之旅:第 28 天

我的 React 之旅:第 28 天

DDD
发布: 2025-01-03 20:28:40
原创
955 人浏览过

My React Journey: Day 28

在 React 中构建待办事项列表

今天,我参与了一个 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>
);
登录后复制

要点

  1. React Hooks:useState 钩子是管理本地组件状态的有效方法。
  2. 事件处理:handleInputChange、addTask 和 deleteTask 等函数展示了用户交互如何更新 UI。
  3. 动态列表渲染:使用地图迭代任务使应用程序动态并响应变化。
  4. 样式最佳实践:结合 CSS 悬停效果和过渡效果可增强用户体验。

一步一步

源代码
您可以在 GitHub 上访问该项目的完整源代码:
?待办事项列表 React 应用程序存储库

随意探索、分叉并为项目做出贡献!

以上是我的 React 之旅:第 28 天的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板