Membina Senarai Tugasan dalam React

Hari ini, saya mengusahakan projek React untuk mencipta Apl Senarai Tugasan yang ringkas tetapi berkuasa. Projek ini memperdalam pemahaman saya tentang cangkuk React, pengurusan negeri dan pengendalian acara sambil membenarkan saya meningkatkan fungsi dengan ciri tambahan seperti mengalihkan tugas ke atas atau ke bawah.

Berikut ialah pecahan perkara yang saya pelajari dan laksanakan.

1. Menyediakan Komponen
Saya menstrukturkan ToDoList.jsx saya untuk menggunakan cangkuk useState untuk mengurus tugas. Ini membolehkan saya mengemas kini dan memberikan senarai tugasan secara dinamik. Di bawah ialah persediaan asas untuk mengurus tugas:

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. Menambah dan Memadam Tugasan
Saya belajar cara memanipulasi keadaan untuk menambah dan memadam tugasan. Fungsi addTask menyemak sama ada input itu sah sebelum menambahkannya, manakala deleteTask mengalih keluar tugas tertentu berdasarkan indeksnya:

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

3. Mengalihkan Tugasan Ke Atas dan Ke Bawah
Penambahbaikan utama kepada projek itu ialah melaksanakan penyusunan semula tugas. Fungsi moveTaskUp dan moveTaskDown menyusun semula tugas berdasarkan indeksnya:

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. Menambah Gaya dengan CSS
Untuk menjadikan apl itu menarik secara visual, saya menggunakan gaya tersuai dalam index.css. Berikut ialah beberapa sorotan:

Penggayaan Butang:

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

Penggayaan Item Tugasan:

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. Senarai Tugasan Lengkap dalam Tindakan
Begini cara semuanya disatukan dalam komponen 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>
);

Pengambilan Utama

1. Cangkuk React: Cangkuk useState ialah cara yang cekap untuk mengurus keadaan komponen setempat.
2. Pengendalian Acara: Fungsi seperti handleInputChange, addTask dan deleteTask mempamerkan cara interaksi pengguna boleh mengemas kini UI.
3. Rendering Senarai Dinamik: Menggunakan peta untuk mengulangi tugas menjadikan apl dinamik dan responsif kepada perubahan.
4. Penggayaan Amalan Terbaik: Menggabungkan kesan tuding CSS dan peralihan meningkatkan pengalaman pengguna.

Satu langkah pada satu masa

Kod Sumber
Anda boleh mengakses kod sumber penuh untuk projek ini di GitHub:
? Repositori Apl React Senarai Tugasan

Jangan segan-segan untuk meneroka, bercadang dan menyumbang kepada projek!

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari ke-28. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!