Cara membuat komponen filter reaktif pada panduan React – Beragampengetahuan

Dalam pengembangan web, komponen responsif dan ramah pengguna menjadi sangat penting. Salah satunya adalah komponen filter, yang memungkinkan pengguna web dengan cepat memfilter antarmuka pengguna (UI) dan elemen data serta hanya menampilkan bidang yang relevan. Tantangannya adalah membuat komponen filter yang sesuai dengan ukuran layar apa pun.

Artikel ini akan mendemonstrasikan cara mengimplementasikan komponen filter reaktif menggunakan React. Tutorial ini menjelaskan bagaimana pengembang dapat membangun filter fleksibel ke dalam aplikasi web mereka.

Daftar isi

• Praktik terbaik untuk membangun antarmuka pengguna komponen React Filter yang responsif
• Cara membuat komponen filter React reaktif: panduan langkah demi langkah
• Buat tombol yang mengontrol komponen filter React
• Merancang tombol komponen filter React
• Menerapkan modals untuk perangkat seluler
• Gabungkan semuanya
• sebagai kesimpulan

Praktik terbaik untuk membangun antarmuka pengguna komponen React Filter yang responsif

Di UI modern, elemen bersifat dinamis dan ditempatkan sesuai kenyamanan pengguna. Komponen harus merespons perubahan ukuran jendela dan layar. Implementasi dan penempatan elemen yang ideal dapat menghasilkan tata letak yang lebih jelas dan pengalaman pengguna (UX) yang lebih lancar.

Ada praktik terbaik tertentu yang harus diikuti saat membuat filter React reaktif. Komponen filter harus beradaptasi secara mulus dengan berbagai ukuran layar dan perubahan rasio aspek. Situasi yang berbeda harus menggunakan jenis filter yang berbeda. Menu tarik-turun sangat bagus untuk desain desktop karena menghemat ruang dan mudah dinavigasi.

Pada perangkat seluler, elemen ramah sentuhan seperti modals dan tombol lebih disukai untuk meningkatkan kegunaan. Elemen harus ditempatkan agar mudah diakses dan dibaca, menjaga tata letak tetap bersih dan responsif. Antarmuka yang bersih ini memungkinkan pengguna baru dan berpengalaman untuk berinteraksi secara efektif dengan komponen filter tanpa masalah apa pun.

Cara membuat komponen filter React reaktif: panduan langkah demi langkah

1. Buat proyek React

Pertama, siapkan proyek React baru menggunakan perintah berikut Buat aplikasi reaksi:

npx create-react-app my-filter-app

aplikasi filter saya Bisa berupa nama apa saja untuk aplikasi React Anda.

Struktur folder organisasi adalah sebagai berikut:

kode sumber

• Elemen
  • Kartu.js
  • tombol filter.js
  • filtermodal.js
• data

2. Buat komponen filter

Manajemen status

Mulailah dengan mengimpor React hooks yang diperlukan dan data Anda aplikasi.js:

import React,  useState, useEffect  from "react";
import Data from "./Data/Data";
import Card from "./components/Card";
import FilterButton from "./components/filterButton.js";

untuk data.jskami menggunakan data sederhana dalam array objek yang mewakili item menu, setiap objek berisi sesuatu seperti PENGENAL, judul, kategori, harga, menggambarkanDan gambar. Data ini mengisi dan memfilter item menu yang ditampilkan dalam aplikasi.

import React from "react";


function Card(item)
  return (
    <div className="container-fluid">
      <div className="row justify-content-center">
        item.map((val) => (
          <div className="card m-3 p-3" style= width: "18rem", backgroundColor: "#303030"  key=val.id>
            <img src=val.img alt=val.title style=border:"1px solid black", backgroundColor: "white" className="card-img-top" />
            <div className="card-body" style=border:"1px solid black;", backgroundColor: "white">
              <h5 className="card-title">
                val.title - val.price$
              </h5>
              <p className="card-text">val.desc</p>
            </div>
          </div>
        ))
      </div>
    </div>
  ); ; 

export default Card;

ini kartu Komponen menampilkan daftar item sebagai kartu, dengan setiap kartu menampilkan gambar, judul, harga, dan deskripsi. Ia menerima prop “item”, memetakannya, dan menghasilkan kartu gaya untuk setiap item.

Menggunakan pengaturan manajemen negara Gunakan status Sebuah hook untuk mengatur item mana yang ditampilkan dan boolean untuk melacak apakah perangkat telah berpindah:

const [item, setItem] = useState(Data);
const [isMobile, setIsMobile] = useState(false);

menyaring logika

Buat fungsi untuk memfilter item berdasarkan kategori:

const filterItems = (cat) => 
    const newItems = Data.filter((newVal) => newVal.category === cat);
    setItem(newItems);  ;

3. Desain responsif

menggunakan Efek penggunaan Hook menambahkan pendengar acara pengubahan ukuran untuk diperbarui adalah seluler Status berdasarkan lebar jendela:

useEffect(() => 
    const handleResize = () => 
      setIsMobile(window.innerWidth <= 768);
    ; 

    window.addEventListener("resize", handleResize);
    handleResize(); 

    return () => window.removeEventListener("resize", handleResize);
  , []);

Efek penggunaan kait untuk mengelola pengubahan ukuran jendela secara efisien untuk memperbarui adalah seluler Status berdasarkan lebar jendela. ini Tangani pengubahan ukuran Fungsi memeriksa apakah lebar jendela 768 piksel atau kurang, disetel adalah seluler tiba nyata jika demikian dan Salah jika tidak. dengan menambahkan Tangani pengubahan ukuran Bertindak sebagai pendengar acara pengubahan ukuran dan memanggilnya pada awalnya, mengatur status secara tepat saat pemasangan dan pengubahan ukuran.

Buat tombol yang mengontrol komponen React Filter

1. Buat tombol filter

Buat sebuah tombol penyaring Komponen yang menampilkan menu dropdown dengan kotak centang untuk setiap kategori:

import React,  useState  from "react";
import Data from "../Data/Data";


const FilterButton = ( menuItems, filterItems, setItem ) => 
  const [selectedItems, setSelectedItems] = useState(new Set());


  const handleCheckboxChange = (item) => 
    const newSelectedItems = new Set(selectedItems);
    if (newSelectedItems.has(item)) 
      newSelectedItems.delete(item);
     else 
      newSelectedItems.add(item);        setSelectedItems(newSelectedItems);    applyFilters(newSelectedItems);  ;
const applyFilters = (selectedItems) => 
    if (selectedItems.size === 0 ; 

  return (
    <div className="dropdown">
      <button
        className="btn btn-dark dropdown-toggle"
        style=width:"125px"
        type="button"
        id="dropdownMenuButton"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Filter
      </button>
      <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
        menuItems.map((val, id) => (
          <li key=id className="dropdown-item">
            <div className="form-check">
              <input
                className="form-check-input"
                type="checkbox"
                id=`filter-$val`
                onChange=() => handleCheckboxChange(val)
              />
              <label className="form-check-label" htmlFor=`filter-$val`>
                val
              </label>
            </div>
          </li>
        ))
        <li className="dropdown-item">
          <div className="form-check">
            <input
              className="form-check-input"
              type="checkbox"
              id="filter-all"
              onChange=() => handleCheckboxChange("All")
            />
            <label className="form-check-label" htmlFor="filter-all">
              All
            </label>
          </div>
        </li>
      </ul>
    </div>
  ); ; 

export default FilterButton;

ini Komponen ini menyediakan menu drop-down untuk memfilter item berdasarkan kategori. itu terus item yang dipilih Status untuk melacak kategori yang dipilih. ini Menangani perubahan kotak centang kategori saklar fungsi item yang dipilih dan menelepon Terapkan penyaringyang memperbarui item yang ditampilkan berdasarkan filter yang dipilih. Struktur BEJ menyertakan tombol tarik-turun dan daftar kotak centang untuk setiap kategori, serta opsi “Semua” untuk menyetel ulang filter.

2. Interaksi antara tombol dan logika pemfilteran

ini tombol penyaring Komponen menggunakan event handler untuk mengubah status filter. Aktifkan proses pemfilteran menggunakan perintah berikut di klik Peristiwa yang memperbarui item yang dipilih dan memfilter data yang ditampilkan sesuai dengan itu.

Desain tombol komponen React Filter

Daya tarik visual dan desain responsif

Untuk desain tombol, kami menggunakan Bootstrap, kerangka CSS populer yang memastikan desain responsif yang konsisten. Dalam aplikasi React kami, kami juga menggunakan Bootstrap untuk mendesain berbagai komponen seperti Cards, Dropdown, dan Modal.

Bootstrap juga memastikan daya tanggap dengan tetap mempertahankan aspek yang berbeda. Untuk kueri media, kami menggunakan fungsi di App.js untuk mengelola perubahan dari tampilan desktop ke tampilan seluler dan sebaliknya.

Menerapkan modals untuk perangkat seluler

Modals akan membantu menghasilkan antarmuka terfilter layar penuh dan bebas gangguan untuk perangkat seluler.

1. Implementasi

Buat sebuah FilterModal Komponen yang menggunakan komponen modal Bootstrap:

import React,  useState  from "react";
import Data from "../Data/Data.js";


const FilterModal = ( menuItems, filterItems, setItem, Data ) => 
  const [selectedItems, setSelectedItems] = useState(new Set());


  const handleCheckboxChange = (item) => 
    const newSelectedItems = new Set(selectedItems);
    if (newSelectedItems.has(item)) 
      newSelectedItems.delete(item);
     else 
      newSelectedItems.add(item);        setSelectedItems(newSelectedItems);  ; 

  const applyFilters = () => 
    if (selectedItems.size === 0 ; 

  return (
    <div className="modal fade" id="filterModal" tabIndex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
      <div className="modal-dialog">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title" id="filterModalLabel">Filter</h5>
            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div className="modal-body">
            menuItems.map((val, id) => (
              <div key=id className="form-check">
                <input
                  className="form-check-input"
                  type="checkbox"
                  id=`filter-$val`
                  onChange=() => handleCheckboxChange(val)
                />
                <label className="form-check-label" htmlFor=`filter-$val`>
                  val
                </label>
              </div>
            ))
            <div className="form-check">
              <input
                className="form-check-input"
                type="checkbox"
                id="filter-all"
                onChange=() => handleCheckboxChange("All")
              />
              <label className="form-check-label" htmlFor="filter-all">
                All
              </label>
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button
              type="button"
              className="btn btn-dark"
              data-bs-dismiss="modal"
              onClick=applyFilters
            >
              Apply
            </button>
          </div>
        </div>
      </div>
    </div>
  ); ; 

export default FilterModal;

Komponen modalFilter memungkinkan pengguna untuk mengurutkan item berdasarkan preferensi mereka menggunakan mode dengan kotak centang. Ini mengelola kategori yang dipilih item yang dipilih negara. ini Menangani perubahan kotak centang kategori saklar fungsi item yang dipilihmeskipun Terapkan penyaring Pembaruan menampilkan item berdasarkan filter yang dipilih. Struktur BEJ menyertakan modal dengan kotak centang untuk setiap kategori, tombol “Tutup”, dan tombol “Terapkan” yang memicu logika pemfilteran.

satukan semuanya

Untuk merakit unit filter, ikuti langkah-langkah berikut:

1. Siapkan proyek dan buat struktur folder.
2. Membangun dan menata komponen.
3. Tambahkan logika pemfilteran dan manajemen status.
4. Pastikan daya tanggap dan aksesibilitas pada perangkat yang berbeda.

Berikut file App.js lengkapnya:

import React,  useState, useEffect  from "react";
import Data from "./Data/Data";
import Card from "./components/Card";
import FilterButton from "./components/filterButton.js";
import FilterModal from "./components/modalFilter.js";


const App = () => 
  const [item, setItem] = useState(Data);
  const [isMobile, setIsMobile] = useState(false);
  const menuItems = [...new Set(Data.map((val) => val.category))];


  const filterItems = (cat) => 
    const newItems = Data.filter((newVal) => newVal.category === cat);
    setItem(newItems);  ; 

  useEffect(() => 
    const handleResize = () => 
      setIsMobile(window.innerWidth <= 768);
    ; 

    window.addEventListener("resize", handleResize);
    handleResize(); // Initialize


    return () => window.removeEventListener("resize", handleResize);
  , []); 

  return (
    <div className="container-fluid">
      <div className="row">
        <h1 className="col-12 text-center my-3 fw-bold">Our Menu</h1>
        isMobile ? (
          <>
            <button type="button" className="btn btn-dark m-3" data-bs-toggle="modal" data-bs-target="#filterModal">
              Filter
            </button>
            <FilterModal menuItems=menuItems filterItems=filterItems setItem=setItem Data=Data />
          </>
        ) : (
          <FilterButton menuItems=menuItems filterItems=filterItems setItem=setItem Data=Data />
        )
      </div>
      <Card item=item />
    </div>  ); ; 

export default App;

Komponen filter desktop

Ini adalah tampilan akhir dari aplikasi React kita, dengan komponen filter di tampilan desktop. Seperti yang bisa kita lihat, ada tombol filter; dengan mengkliknya, kita dapat melihat semua opsi pemfilteran dalam daftar drop-down.

Item yang difilter

Di sini kami telah memilih beberapa item untuk disaring dan kami dapat melihat bahwa item tersebut berfungsi dengan baik dan menunjukkan kepada kami item yang kami inginkan.

Pada gambar di atas, kami membuka aplikasi React dalam tampilan seluler. Tombol komponen filter telah membuka modal yang berisi semua item filter. Kami telah memilih dua item untuk difilter, dan setelah mengklik tombol Terapkan, filter akan diterapkan ke item ini. Di bawah ini adalah gambar item yang difilter.

Item yang difilter

sebagai kesimpulan

Komponen filter memungkinkan pengguna menavigasi situs web dengan mudah dengan memfilter elemen yang relevan. Komponen filter dinamis menyesuaikan posisi dan ukurannya sesuai dengan perubahan ukuran layar dan memberikan tata letak yang bersih.

Blog ini menjelaskan langkah-langkah membuat komponen filter responsif menggunakan React. membuat Antarmuka berorientasi pengguna dan penanganan status yang efisien melalui kait, misalnya. Gunakan status atau Gunakan efek, sambil memastikan kompatibilitas perangkat yang berbeda. Dengan menggunakan Bootstrap untuk desain dan pola, selain pendekatan ini, pengembang dapat membangun aplikasi web yang lebih baik, lebih bermanfaat dan menarik.