Bagaimana anda membuat komponen terkawal dalam React?

Bagaimana anda membuat komponen terkawal dalam React?

Mewujudkan komponen terkawal dalam React melibatkan menguruskan keadaan elemen bentuk (seperti medan input, jatuh turun, dan kawasan teks) melalui keadaan komponen, dan bukannya membiarkan DOM mengurusnya. Berikut adalah panduan langkah demi langkah mengenai cara membuat komponen terkawal:

1. Sediakan Negeri: Pertama, anda perlu menubuhkan keadaan dalam komponen React anda untuk memegang nilai -nilai elemen bentuk. Ini boleh dilakukan dengan menggunakan cangkuk useState untuk komponen fungsional atau objek this.state untuk komponen kelas.

    <code class="javascript">const [inputValue, setInputValue] = useState('');</code>

2. BIND NEGARA UNTUK NILAI: Seterusnya, anda mengikat keadaan ke atribut value elemen borang. Untuk medan input, ini mungkin kelihatan seperti:

    <code class="jsx"><input type="text" value="{inputValue}" onchange="{handleChange}"></code>

3. Mengendalikan perubahan: Anda perlu membuat fungsi untuk mengendalikan perubahan pada elemen borang. Fungsi ini mengemas kini keadaan apabila pengguna berinteraksi dengan elemen borang.

    <code class="javascript">const handleChange = (event) => { setInputValue(event.target.value); };</code>

Dengan mengikuti langkah -langkah ini, anda secara berkesan membuat komponen terkawal di mana React bertanggungjawab terhadap keadaan borang, dan apa -apa kemas kini ke unsur -unsur bentuk mesti melalui pengurusan keadaan React.

Apakah faedah menggunakan komponen terkawal dalam React?

Komponen terkawal dalam React menawarkan beberapa faedah yang meningkatkan pembangunan dan pengalaman pengguna:

1. Predikabiliti dan Kawalan: Oleh kerana keadaan komponen menguruskan elemen bentuk, anda mempunyai kawalan penuh terhadap apa yang berlaku kepada data dan bagaimana ia dipaparkan. Ini menjadikan tingkah laku aplikasi anda dapat diramalkan dan lebih mudah untuk debug.
2. Sumber Kebenaran Tunggal: Dengan komponen terkawal, keadaan elemen bentuk disimpan di satu tempat (keadaan komponen), yang bertindak sebagai satu sumber kebenaran. Ini memudahkan pengurusan data dan mengurangkan peluang ketidakkonsistenan data.
3. Kebolehgunaan semula dan skalabiliti: Komponen terkawal menjadikannya lebih mudah untuk menggunakan semula logik bentuk di bahagian -bahagian yang berlainan aplikasi anda. Anda boleh menulis logik pengesahan, transformasi, dan penyerahan sekali dan memohon kepada pelbagai bentuk.
4. Pengesahan bentuk yang lebih mudah: Menguruskan keadaan elemen bentuk menjadikannya mudah untuk melaksanakan pengesahan masa nyata dan memberikan maklum balas segera kepada pengguna, meningkatkan pengalaman pengguna.
5. Ujian yang lebih mudah: Memandangkan Negeri diuruskan secara programatik, lebih mudah untuk menulis ujian unit untuk borang untuk memastikan mereka berkelakuan seperti yang diharapkan di bawah pelbagai senario.

Bagaimanakah anda dapat mengendalikan pengesahan borang dengan komponen terkawal dalam React?

Pengendalian Borang Pengendalian dengan komponen terkawal dalam React melibatkan penggunaan negeri untuk mengesan kesahihan elemen bentuk. Inilah cara anda boleh melakukannya:

1. Logik Pengesahan: Tulis fungsi yang memeriksa kesahihan input borang. Ini boleh menjadi pemeriksaan mudah untuk medan yang diperlukan, atau lebih banyak pengesahan kompleks seperti format e -mel, kekuatan kata laluan, dll.

    <code class="javascript">const validateEmail = (email) => { const re = /^[a-zA-Z0-9._-] @[a-zA-Z0-9.-] \.[a-zA-Z]{2,4}$/; return re.test(String(email).toLowerCase()); };</code>

2. Nyatakan untuk Pengesahan: Tambah pembolehubah negeri untuk mengesan sama ada bidang sah dan mungkin memegang mesej ralat.

    <code class="javascript">const [email, setEmail] = useState(''); const [emailError, setEmailError] = useState('');</code>

3. Kemas kini Pengesahan pada Perubahan: Dalam fungsi handleChange anda, hubungi fungsi pengesahan anda dan kemas kini keadaan pengesahan dengan sewajarnya.

    <code class="javascript">const handleEmailChange = (event) => { const newEmail = event.target.value; setEmail(newEmail); if (!validateEmail(newEmail)) { setEmailError('Please enter a valid email address'); } else { setEmailError(''); } };</code>

4. Maklum Balas Pengesahan Paparan: Gunakan keadaan pengesahan untuk memaparkan mesej ralat atau penunjuk kejayaan kepada pengguna dalam masa nyata.

    <code class="jsx"><input type="email" value="{email}" onchange="{handleEmailChange}"> {emailError && <div style="{{color:">{emailError}</div>}</code>

5. Penyerahan Borang: Apabila borang dikemukakan, anda boleh menyemak keadaan pengesahan untuk memutuskan sama ada untuk meneruskan penyerahan atau menunjukkan kesilapan.

    <code class="javascript">const handleSubmit = (event) => { event.preventDefault(); if (!emailError) { // Proceed with form submission } else { // Handle form submission errors } };</code>

Pendekatan ini membolehkan anda membuat pengalaman pengguna yang lancar di mana pengesahan berlaku dalam masa nyata, membantu pengguna membetulkan kesilapan ketika mereka pergi.

Apakah perbezaan antara komponen terkawal dan tidak terkawal dalam React?

Perbezaan utama antara komponen terkawal dan tidak terkawal dalam React terletak pada bagaimana mereka mengurus dan mengendalikan data bentuk:

1. Pengurusan Negeri:

   • Komponen terkawal: Komponen ini mempunyai keadaan dan tingkah laku mereka yang diuruskan oleh komponen induk. Komponen induk menggunakan prop untuk lulus nilai semasa dan pengendali acara kepada komponen kanak -kanak, dengan berkesan mengawal nilai input.
   • Komponen yang tidak terkawal: Komponen ini menguruskan negeri mereka sendiri secara dalaman. Mereka menggunakan ref untuk mengakses nilai semasa elemen bentuk secara langsung dari DOM.

2. Aliran data:

   • Komponen terkawal: Data mengalir dari keadaan komponen ke DOM. Sebarang perubahan kepada nilai input mesti melalui pengendali acara yang mengemas kini keadaan.
   • Komponen yang tidak terkawal: Data dibaca secara langsung dari DOM menggunakan ref apabila diperlukan, melangkaui keadaan komponen.

3. Kebolehprediksi dan kawalan:

   • Komponen Kawalan: Menawarkan lebih banyak kawalan dan kebolehprediksi kerana negara diuruskan secara programatik. Ini sesuai untuk bentuk kompleks di mana anda perlu mengesahkan, mengubah, atau mengendalikan data secara real-time.
   • Komponen yang tidak terkawal: Lebih mudah untuk disediakan dan mungkin lebih disukai untuk bentuk mudah di mana anda perlu mengakses data sekali sahaja, seperti pada penyerahan borang. Walau bagaimanapun, mereka menawarkan kurang kawalan ke atas tingkah laku bentuk.

4. Contoh Penggunaan:

   • Komponen terkawal: Sesuai untuk bentuk yang memerlukan pengesahan masa nyata, manipulasi data kompleks, atau apabila anda perlu menggunakan semula logik borang di pelbagai komponen.
   • Komponen yang tidak terkawal: Berguna untuk bentuk cepat dan mudah di mana anda tidak perlu menguruskan keadaan setiap bidang secara aktif, seperti input carian mudah.

Ringkasnya, komponen terkawal menawarkan lebih banyak kawalan dan sesuai untuk interaksi bentuk yang kompleks, manakala komponen yang tidak terkawal adalah lebih mudah dan lebih sesuai untuk kes penggunaan asas.

Atas ialah kandungan terperinci Bagaimana anda membuat komponen terkawal dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!