[ad_1]
React menyertakan pustaka komponen untuk hampir semua hal, mulai dari formulir dan kotak pencarian pelengkapan otomatis mencapai bilah geser dan bilah navigasi.
Educational ini akan membuat Dropdown utama di menu React JS, pertama sebagai komponen fungsional dan kemudian sebagai komponen kelas. Kami sepertinya tidak akan memakai pustaka; sebagai gantinya, kami akan memakai komponen bergaya untuk memutuskan elemen dropdown.
ADVERTISEMENT
SCROLL TO RESUME CONTENT
Meski demikian kerangka kerja UI ini bisa membantu Anda bekerja lebih cepat dan lebih efisien, kerangka kerja ini juga bisa membuat proyek Anda lebih rumit dan meningkatkan ukuran bundel Anda. Jadi, kecuali Anda mempunyai proyek tertentu yang memerlukan penggunaan pustaka, sebaiknya kembangkan komponen Anda dan buat begitu sesederhana mungkin saja.
Membuat Dropdown di React Js
Proses ini adalah panduan untuk pemula dalam React. Kami akan mengajarkan Anda cara membuat dropdown di React JS. Kode instructional ini:
impor * sebagai Bereaksi dari 'bereaksi';
const Aplikasi = () => {
kembali (
);
Bahasa Indonesia: };
ekspor aplikasi default;
Dropdown di React JS harus segera mempunyai label sesuai dengan harapan pengguna. Dalam skenario ini, Anda ingin kata-kata default untuk dropdown Anda menjadi “Pilih opsi.”
Tambahkan HTML untuk properti ke elemen label Anda agar ini berfungsi:
impor * sebagai Bereaksi dari 'bereaksi';
const Aplikasi = () => {
kembali (
);
Bahasa Indonesia: };
ekspor aplikasi default;
Dropdown di React JS ini bisa mengubah standing yang dipilih browser Anda dengan menampilkan nilainya secara independen. Tetapi, ini hanyalah standing HTML internal yang dipilih, yang belum dikelola React.
Mari kita modifikasi dengan menjadikan pilihan ini terkontrol alih-alih tak terkontrol:
impor * sebagai Bereaksi dari 'bereaksi';
const Aplikasi = () => {
const (nilai, setValue) = React.useState('buah');
const handleChange = (peristiwa) => {
setValue(nilai.goal.peristiwa);
Bahasa Indonesia: };
kembali (
Apa yang kita makan?
Kami makan {nilai}!
);
Bahasa Indonesia: };
ekspor aplikasi default;
Usestate adalah hook dalam React yang memungkinkan komponen fungsional menangani standing. Kita bisa memakai hook ini untuk merender pilihan secara dinamis dalam elemen yang kita pilih.
OnChange akan dapatkan metode dari komponen kita, yang akan menyetel nilai elemen choose kita untuk bereaksi terhadap suatu standing. Nilai ini kemudian bisa digunakan untuk mengubah perilaku elemen.
Pelajari 15+ Alat dan Keterampilan yang Cukup banyak Diminati!
Program Magister Pengujian OtomasiJelajahi Program
Kita juga bisa memakai CSS untuk menambahkan gaya tambahan, namun kita sepertinya tidak ingin mempersulit logika komponen kita:
impor * sebagai Bereaksi dari 'bereaksi';
const Aplikasi = () => {
const pilihan = (
{ label: 'Buah', nilai: 'buah' },
{ label: 'Sayur mayur', nilai: 'sayur mayur' },
{ label: 'Daging', nilai: 'daging' },
);
const (nilai, setValue) = React.useState('buah');
const handleChange = (peristiwa) => {
setValue(nilai.goal.peristiwa);
Bahasa Indonesia: };
kembali (
Apa yang kita makan?
{pilihan.peta((pilihan) => (
))}
Kami makan {nilai}!
);
Bahasa Indonesia: };
ekspor aplikasi default;
Kita segera akan mulai dari awal dan membuat Dropdown yang berfungsi penuh di React JS, komponen yang bisa digunakan kembali dan diberi gaya.
Hal pertama yang akan kita lakukan adalah membuat folder dropdown sederhana untuk proyek kita. Kita segera akan membuat tiga report dalam folder tersebut: index.html, taste.css, dan script.js, serta folder kosong bernama img untuk gambar.
Mari berikan proyek ini beberapa gaya CSS dasar dengan menambahkan yang berikut ke gaya kita. CSS (cascading taste sheet):
impor * sebagai Bereaksi dari 'bereaksi';
const Aplikasi = () => {
const pilihan = (
{ label: 'Buah', nilai: 'buah' },
{ label: 'Sayur mayur', nilai: 'sayur mayur' },
{ label: 'Daging', nilai: 'daging' },
);
const (nilai, setValue) = React.useState('buah');
const handleChange = (peristiwa) => {
setValue(nilai.goal.peristiwa);
Bahasa Indonesia: };
kembali (
label=”Apa yang kita makan?”
pilihan={pilihan}
nilai={nilai}
padaPerubahan={perubahanPegangan}
/>
Kami makan {nilai}!
);
Bahasa Indonesia: };
const Dropdown = ({ label, nilai, opsi, onChange }) => {
kembali (
{label}
{pilihan.peta((pilihan) => (
))}
);
Bahasa Indonesia: };
ekspor aplikasi default;
Pada bab sebelumnya, kita telah membuat Dropdown yang bisa digunakan kembali di komponen React JS dan menggunakannya untuk merender elemen terpilih di React.
Sekarang komponen Dropdown kita telah digunakan kembali, kita bisa menggunakannya lagi. Misalkan saja, andai Anda menerapkan gaya CSS ke elemen choose di React dan akan menerapkan gaya tersebut ke semua komponen Dropdown di proyek React Anda.
Andai Anda ingin membuat grup dropdown sekarang, Anda bisa meletakkan beberapa komponen Dropdown di React JS secara berdampingan dan memberi gaya dengan border dan alignment agar tampak sebagai grup dropdown:
impor * sebagai Bereaksi dari 'bereaksi';
const Aplikasi = () => {
const (makanan, setFood) = React.useState('buah');
const (minuman, setMinuman) = React.useState('air');
const handleFoodChange = (peristiwa) => {
setFood(peristiwa.goal.nilai);
Bahasa Indonesia: };
const handleDrinkChange = (peristiwa) => {
setDrink(peristiwa.goal.nilai);
Bahasa Indonesia: };
kembali (
label=”Apa yang kita makan?”
pilihan={(
{ label: 'Buah', nilai: 'buah' },
{ label: 'Sayur mayur', nilai: 'sayur mayur' },
{ label: 'Daging', nilai: 'daging' },
)}
nilai={makanan}
onChange={peganganPerubahanMakanan}
/>
label=”Apa yang kita minum?”
pilihan={(
{ label: 'Air', nilai: 'air' },
{ label: 'Bir', nilai: 'bir' },
{ label: 'Anggur', nilai: 'anggur' },
)}
nilai={minuman}
onChange={peganganPerubahanMinuman}
/>
Kami makan {makanan}!
Kami minum {minum}!
);
Bahasa Indonesia: };
ekspor aplikasi default;
Itu memberhentikan diskusi kita.
Itulah semua yang perlu dilakukan untuk membuat Dropdown di komponen React JS. Andai Anda baru mengenal React, saya harap pelajaran ini telah membantu Anda memahami beberapa prinsip dan pola dasar.
[ad_2]
Sumber: simplilearn-com
