Buat Bilah Pencarian di React.js
Blog ini untuk orang-orang yang memiliki pemahaman dasar tentang react.js
Di blog ini, kita akan membuat aplikasi sederhana di react.js yang menampilkan bilah pencarian di bagian atas dan daftar nama bunga di bawah alias data palsu kita. Bilah pencarian akan memungkinkan kita untuk mengetik ke dalam kolom input yang akan mencari melalui data palsu kita dan menampilkan nama bunga secara instan di layar. Kami akan menggunakan komponen berbasis kelas untuk mencapai ini.
Mulai
Untuk membuat proyek react baru, jalankan:
Hapus semua file yang tidak perlu seperti yang disorot di bawah ini:
Buat subfolder komponen di folder src. Kemudian buat dua komponen anak bernama FlowersContainer dan SearchBar.
Gunakan kode berikut untuk gaya CSS. Anda dipersilakan untuk mendesain aplikasi sesuka Anda.
Siapkan Komponen Aplikasi
App.js akan menjadi komponen utama Anda tempat semua data dan metode instance Anda akan disimpan. Lihat gambar di bawah untuk kode saya.
Sekarang mari kita pecahkan kode ini!
Baris 7: negara bagian
Di objek status kami, kami memiliki status "bunga" yang memiliki larik nama bunga sebagai nilainya. Kami juga memiliki status "searchTerm" yang memiliki string kosong sebagai nilainya yang akan mewakili istilah pencarian yang akan kita ketikkan ke bidang input pencarian kita.
Baris 21: fungsi handleSearchTermChange
Fungsi handleSearchTermChange akan diteruskan sebagai prop di komponen SeachBar. Saat dipicu, setState akan memperbarui nilai "searchTerm".
Baris 25: fungsi filterFlower
Fungsi filterFlower akan menjadi fungsi panggilan balik kami yang akan diteruskan dalam metode filter di bawah ini. Metode toLowerCase () akan mengubah string menjadi huruf kecil. Metode split () akan membagi string menjadi substring di setiap spasi dalam string dan menempatkan substring ke dalam array. Kemudian metode join () akan mengambil array string itu dan menggabungkannya menjadi satu string tanpa spasi. Saat pengguna mengetik di kolom input, input bisa jadi case insensitive dan akan mengabaikan ruang kosong di nama bunga dengan banyak kata. Anda mungkin telah memperhatikan bahwa kami juga menyertakan "indexOf (dinormalisasi)! == -1" di bunga. Ini memeriksa apakah string yang kita ketikkan ada di nama bunga.
Baris 30: JSX
Dalam metode render komponen App, kita memiliki komponen turunan SearchBar, dan metode filter dan peta kita dengan komponen FlowersContainer diteruskan. Metode filter akan membuat larik baru dengan semua nama bunga yang lulus pengujian yang merupakan fungsi filterFlower kita. Kemudian kami memanggil metode peta yang menggunakan rangkaian bunga yang telah difilter untuk diuraikan menjadi komponen bunga individual.
Buat Komponen Wadah Bunga
Komponen FlowersContainer akan menampilkan elemen yang terlihat mirip dengan apa pun yang kita ketikkan ke dalam bidang input pencarian.
Buat Komponen SearchBar
Komponen SearchBar berisi acara onChange yang meneruskan fungsi handleSearchTermChange kami yang menyetel searchTerm ke "e.target.value". Saat kita mengetik di kolom input pencarian, setState dipicu di handleSearchTermChange, lalu komponen App kita dirender ulang.
Produk akhir Anda akan terlihat seperti ini:
Itu dia! Saya harap Anda menikmati tutorial kecil saya. Ini hanyalah salah satu dari banyak cara untuk membuat bilah pencarian di react.js.
Sumber:
Suggested posts
Menghindari Akibat Menghancurkan Stroke: Belajar dari Perjalanan Keluarga .
Pendahuluan Stroke adalah keadaan darurat medis yang dapat menyerang siapa saja kapan saja. Itu terjadi ketika aliran darah ke bagian otak terganggu, yang menyebabkan hilangnya fungsi otak secara tiba-tiba.
Sumber daya pengkodean saya yang paling sering digunakan
Minggu ini, saya menerima email dari anggota daftar email harian. Mereka ingin tahu: Sumber daya apa yang Anda kunjungi setiap hari, setiap minggu, dan setiap bulan? Pertanyaan bagus! Saya senang untuk mencoba membagikan beberapa wawasan tentang alur kerja saya & sumber daya teratas yang saya gunakan.
Related posts
Penampilan Solo Gadis Berambut Merah
Atas tugas dari Hayden, Katie memfilmkan dirinya sedang masturbasi.
Sudah lewat tengah malam ketika Hayden mengantar Katie kembali ke asrama kampusnya setelah malam mereka bersama. Dia memiliki kelas awal di pagi hari dan tidak memiliki pakaian ganti lagi setelah tinggal bersamanya malam sebelumnya.
Menciptakan Lingkungan Kerja yang Aman
“Dia akan melindungiku saat aku dalam bahaya. Dia akan menyembunyikan saya di tendanya.
Percakapan Berbahaya
Jika kita ingin terus berkembang di planet ini, kita harus melakukan percakapan yang berbahaya. Yang menantang apa yang telah kita lakukan, apa yang kita lakukan, dan apa yang saat ini akan terus kita lakukan (atau rencanakan untuk lakukan).
"The Mariana Trench Unveiled: Menyingkap Kebenaran Tersembunyi yang Mengerikan dari Abyss"
Pendahuluan:Selamat datang, para pembaca yang pemberani, dalam sebuah perjalanan yang akan membawa kita ke kedalaman tergelap planet kita. Di blog ini, kami menyelidiki dunia penuh teka-teki Palung Mariana, mengungkap rahasianya yang tersembunyi dan mengungkap kebenaran mengerikan yang ada di bawah permukaannya.