apakah komponen terkawal tindak balas

Dalam tindak balas, komponen terkawal merujuk kepada komponen yang mengemas kini nilai semasa melalui fungsi panggil balik, komponen React yang menjadikan borang juga mengawal operasi yang berlaku pada borang semasa input pengguna, pada bila-bila masa keadaan; bentuk berubah , akan ditulis kepada keadaan komponen jenis ini dipanggil komponen terkawal dalam React.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah komponen terkawal tindak balas?

Komponen React yang menjadikan borang juga mengawal operasi yang berlaku pada borang semasa input pengguna. Elemen input bentuk yang nilainya dikawal oleh React dengan cara ini dipanggil "komponen terkawal".

Sesetengah netizen menjelaskan perkara ini: Dalam React, apabila keadaan borang berubah, ia akan ditulis kepada keadaan komponen jenis ini dipanggil komponen terkawal dalam React.

Proses kemas kini komponen terkawal:

• 1, anda boleh menetapkan nilai lalai borang dalam keadaan awal

• 2. Apabila nilai borang berubah, panggil pengendali acara onChange,

• 3 Pengendali acara mendapat keadaan yang diubah melalui objek acara e dan menukar keadaan

• 4, setState mencetuskan kemas kini paparan dan melengkapkan kemas kini nilai komponen borang

Komponen terkawal mengemas kini nilai semasa melalui fungsi panggil balik, seperti OnChange . Komponen induk mengawal dan mengurus keadaannya melalui fungsi panggil balik dan menghantar nilai baharu kepadanya sebagai sifat. Komponen terkawal juga dipanggil "komponen bodoh".

const { useState } from 'react';
function Controlled () {
  const [email, setEmail] = useState();
  const handleInput = (e) => setEmail(e.target.value);
  return <input type="text" value={email} onChange={handleInput} />;
}

Pengetahuan lanjutan:

Apakah komponen tidak terkawal?

Komponen tidak terkawal ialah komponen yang menyimpan keadaannya sendiri secara dalaman Anda boleh menggunakan ref untuk menanyakan DOM untuk mencari nilai semasanya apabila diperlukan. Macam HTML tradisional. Kebanyakan komponen bentuk React asli menyokong terkawal dan tidak terkawal:

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

4 Apakah perbezaan antara mereka?

Dalam komponen terkawal, data borang dikendalikan oleh komponen React. Dalam komponen yang tidak terkawal, data borang dikendalikan oleh DOM itu sendiri.

Untuk komponen terkawal, keadaan komponen mesti digunakan. Untuk komponen yang tidak terkawal, penggunaan keadaan adalah pilihan sepenuhnya, tetapi Rujukan mesti digunakan di dalamnya.

Untuk komponen terkawal, kami boleh mengesahkan pada input, tetapi bukan untuk komponen yang tidak terkawal.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci apakah komponen terkawal tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!