Apakah perbezaan antara input terkawal dan input tidak terkawal?

Question

Accepted Answer

Ini semua tentang **siapa yang menjadi sumber kebenaran untuk nilai input** — React state, atau DOM itu sendiri. ## Terkawal (React memiliki nilai) Nilai `value` input didorong oleh state, dan `onChange` membuat state tetap sinkron. DOM selalu mencerminkan React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Karena state adalah sumber kebenaran, Anda dapat memvalidasi, memformat, atau mengubah pada setiap penekanan tombol (mis. paksa huruf besar, batasi panjang, nonaktifkan tombol submit). ## Tidak Terkawal (DOM memiliki nilai) Browser menyimpan nilai; Anda membacanya hanya jika diperlukan melalui ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Kapan menggunakan yang mana - **Terkawal**: sebagian besar formulir — Anda mendapatkan validasi, UI bersyarat, dan satu sumber kebenaran. Kelemahannya adalah render ulang per penekanan tombol (biasanya dapat diabaikan). - **Tidak Terkawal**: formulir sederhana, input file (`` selalu tidak terkawal), atau mengintegrasikan widget non-React. Kode lebih sedikit, tetapi Anda tidak dapat bereaksi terhadap perubahan saat terjadi. Mencampurnya (meneruskan baik `value` maupun `defaultValue`) adalah kesalahan umum dan memicu peringatan React.