在 React 中建立待辦事項(xiàng)清單

今天，我參與了一個(gè) React 項(xiàng)目，以創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的待辦事項(xiàng)清單應(yīng)用程式。這個(gè)專案加深了我對(duì) React hooks、狀態(tài)管理和事件處理的理解，同時(shí)允許我透過向上或向下移動(dòng)任務(wù)等附加功能來增強(qiáng)功能。

這是我所學(xué)到和實(shí)施的內(nèi)容的詳細(xì)說明。

1。設(shè)定組件
我建立了 ToDoList.jsx 以使用 useState 掛鉤來管理任務(wù)。這使我能夠動(dòng)態(tài)更新和呈現(xiàn)任務(wù)清單。以下是管理任務(wù)的基本設(shè)定：

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。新增和刪除任務(wù)
我學(xué)會(huì)瞭如何操縱狀態(tài)來新增和刪除任務(wù)。 addTask 函數(shù)在新增之前檢查輸入是否有效，而 deleteTask 則根據(jù)索引刪除特定任務(wù)：

function deleteTask(index) {
  const updatedTasks = tasks.filter((_, i) => i !== index); // Removes the task at the given index
  setTasks(updatedTasks);
}

3。上下移動(dòng)任務(wù)
該專案的一個(gè)關(guān)鍵改進(jìn)是實(shí)施任務(wù)重新排序。 moveTaskUp 和 moveTaskDown 函數(shù)依據(jù)索引重新排列任務(wù)：

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 加入樣式
為了使應(yīng)用程式具有視覺吸引力，我在 index.css 中應(yīng)用了自訂樣式。以下是一些亮點(diǎn)：

按鈕樣式：

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%);
}

任務(wù)項(xiàng)目樣式：

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。行動(dòng)中完整的待辦事項(xiàng)清單
以下是 ToDoList.jsx 元件中所有內(nèi)容的組合方式：

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>
);

要點(diǎn)

1. React Hooks：useState 鉤子是管理本機(jī)元件狀態(tài)的有效方法。
2. 事件處理：handleInputChange、addTask 和 deleteTask 等函數(shù)展示了使用者互動(dòng)如何更新 UI。
3. 動(dòng)態(tài)清單渲染：使用地圖迭代任務(wù)使應(yīng)用程式動(dòng)態(tài)並回應(yīng)變化。
4. 樣式最佳實(shí)務(wù)：結(jié)合 CSS 懸停效果和轉(zhuǎn)場(chǎng)效果可增強(qiáng)使用者體驗(yàn)。

一步一步

原始碼
您可以在 GitHub 上存取該專案的完整原始程式碼：
？待辦事項(xiàng)清單 React 應(yīng)用程式儲(chǔ)存庫

隨意探索、分叉並為專案做出貢獻(xiàn)！

以上是我的 React 之旅：第 28 天的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！