Apa saja komponen yang dikontrol React dan komponen yang tidak terkontrol?

103

Apa saja komponen terkontrol dan komponen tak terkontrol di ReactJS? Bagaimana mereka berbeda satu sama lain?

reactjs react-component Xin
sumber
22
Nominasi untuk dibuka kembali. Ini sebenarnya pertanyaan yang cukup tepat. Tidak yakin bagaimana itu bisa dianggap terlalu luas.
Charlie Flowers

Jawaban:

127

Ini terkait dengan komponen DOM yang stateful (elemen formulir) dan dokumen React menjelaskan perbedaannya:

  • Sebuah Komponen Terkendali adalah salah satu yang mengambil nilai saat melalui propsdan memberitahukan perubahan melalui callback seperti onChange. Komponen induk "mengontrol" dengan menangani callback dan mengelola statusnya sendiri dan meneruskan nilai baru sebagai props ke komponen yang dikontrol. Anda juga bisa menyebutnya sebagai "komponen bodoh".
  • Sebuah terkontrol Komponen adalah salah satu yang menyimpan negara sendiri secara internal, dan Anda query DOM menggunakan refuntuk menemukan nilai saat ini ketika Anda membutuhkannya. Ini sedikit lebih seperti HTML tradisional.

Sebagian besar komponen bentuk React asli mendukung penggunaan terkontrol dan tidak terkontrol:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

Dalam sebagian besar (atau semua) kasus, Anda harus menggunakan komponen terkontrol .

Aaron Beall
sumber
1
Bukankah nilai itu diambil statealih - alih props?
Ivanka Todorova
9
@IvankaTodorova Untuk komponen terkontrol, nilai diteruskan props. Komponen yang tidak terkontrol akan digunakan stateuntuk mengontrol nilai itu sendiri secara internal. Inilah perbedaan utamanya.
Aaron Beall
1
Perbedaan di antara keduanya adalah bahwa komponen yang nilainya disetel / diteruskan dan memiliki callback disebut controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) vs. HTML tradisional di mana elemen input menangani nilainya sendiri dan dapat dibaca melalui refsdipanggil uncontrolled components( <value type="text" />). Komponen yang dikontrol mengelola statusnya sendiri melalui setStateatau mendapatkannya dari komponen induknya sebagai properti.
Lior Elrom
Bagaimana Anda memanggil komponen yang mendapatkannya defaultValuemelalui props, tetapi yang memberi tahu controller onBlur?
Paul Razvan Berg
@PaulRazvanBerg Kedengarannya seperti anti-pola, status harus dikontrol di satu tempat . Biasanya Anda akan mengangkat status ke nenek moyang terdekat.
Aaron Beall
1
  • Komponen yang dikontrol memberi tahu komponen lain tentang perubahan menggunakan callback. Sebagai contoh: <Button onClick={() => console.log("clicked")}>Click</Button>.
  • Komponen yang tidak terkontrol tidak memberi tahu komponen lain tentang perubahannya dan Anda hanya dapat mengakses komponen menggunakan ref-s. Referensi mungkin berguna jika Anda perlu mengakses dom nyata elemen HTML
shobe
sumber
0

Komponen yang dikontrol adalah komponen yang mendapatkan nilai yang diubah dari fungsi callback dan komponen yang tidak dikontrol adalah komponen yang memiliki nilai dari DOM. Misalnya, ketika nilai input diubah, kita bisa menggunakan fungsi onChange di Controlled Component dan juga kita bisa mendapatkan nilainya menggunakan DOM seperti ref.

LuarlaGagella
sumber