Di React, komponen terkontrol mengacu pada komponen yang memperbarui nilai saat ini melalui fungsi panggilan balik; komponen React yang merender formulir juga mengontrol operasi yang terjadi pada formulir selama input pengguna ditulis ke dalam status komponen, komponen semacam ini disebut komponen terkontrol di React.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Komponen React yang merender formulir juga mengontrol apa yang terjadi pada formulir selama input pengguna. Elemen input formulir yang nilainya dikontrol oleh React dengan cara ini disebut "komponen terkontrol".
Beberapa netizen menjelaskan hal ini: Di React, setiap kali status formulir berubah, maka akan ditulis ke status komponen. Jenis komponen ini disebut komponen terkontrol di React.
Proses pembaruan untuk komponen yang dikontrol:
1. Anda dapat mengatur nilai default formulir pada keadaan awal
2. Setiap kali nilai formulir berubah, panggil event handler onChange.
3. Pemroses peristiwa mendapatkan status yang diubah melalui objek acara e dan mengubah status;
4. setState memicu pembaruan tampilan dan menyelesaikan pembaruan nilai komponen formulir.
Komponen yang dikontrol memperbarui nilai saat ini melalui fungsi panggilan balik, seperti OnChange. Komponen induk mengontrol dan mengelola statusnya melalui fungsi panggilan balik dan meneruskan nilai baru ke dalamnya sebagai properti. Komponen yang dikontrol disebut juga “komponen bodoh”.
const { useState } dari 'react'; fungsi Terkendali () { const [email, setEmail] = useState(); const handleInput = (e) => setEmail(e.target.value); nilai={email} onChange={handleInput} />;}Perluas pengetahuan Anda:
Apa saja komponen yang tidak terkontrol?
Komponen yang tidak terkontrol adalah komponen yang menyimpan statusnya sendiri secara internal dan dapat menggunakan ref untuk menanyakan DOM guna menemukan nilainya saat ini bila diperlukan. Seperti HTML tradisional. Sebagian besar komponen formulir React asli mendukung kontrol terkontrol dan tidak terkontrol:
const { useRef } dari 'react';fungsi Contoh () { const inputRef = useRef(null); kembalikan <input type="text" defaultValue="bar" ref={inputRef} />}4 Apa perbedaan diantara keduanya?
Dalam komponen terkontrol, data formulir ditangani oleh komponen React. Pada komponen yang tidak terkontrol, data formulir ditangani oleh DOM itu sendiri.
Untuk komponen yang dikontrol, status komponen harus digunakan. Untuk komponen yang tidak terkontrol, penggunaan status sepenuhnya opsional, namun Refs harus digunakan di dalamnya.
Untuk komponen terkontrol kita dapat memvalidasi input tetapi tidak untuk komponen tidak terkontrol.