React Tutorial Bagian 24: Pelajaran Bentuk Kedua

Hari ini kami melanjutkan diskusi tentang penggunaan formulir dalam Bereaksi. Terakhir kali, kami memeriksa fitur interaksi komponen dan bidang teks. Di sini kita membahas bekerja dengan elemen bentuk lain.



→ Bagian 1: ikhtisar kursus, alasan popularitas React, ReactDOM dan JSX
→ Bagian 2: komponen fungsional
→ Bagian 3: file komponen, struktur proyek
→ Bagian 4: komponen induk dan anak
→ Bagian 5: mulai bekerja pada aplikasi TODO, dasar-dasar gaya
→ Bagian 6: tentang beberapa fitur kursus, JSX dan JavaScript
→ Bagian 7: gaya inline
→ Bagian 8: terus bekerja pada aplikasi TODO, terbiasa dengan sifat-sifat komponen
→ Bagian 9: properti komponen
→ Bagian 10: Workshop bekerja dengan properti komponen dan gaya
→ Bagian 11: pembuatan markup dinamis dan metode susunan peta
→ Bagian 12: lokakarya, pekerjaan tahap ketiga pada aplikasi TODO
→ Bagian 13: komponen berbasis kelas
→ Bagian 14: lokakarya tentang komponen berbasis kelas, status komponen
→ Bagian 15: bengkel kesehatan komponen
→ Bagian 16: tahap keempat dari pengerjaan aplikasi TODO, penanganan acara
→ Bagian 17: tahap kelima bekerja pada aplikasi TODO, memodifikasi status komponen
→ Bagian 18: tahap keenam dari pengerjaan aplikasi TODO
→ Bagian 19: metode siklus hidup komponen
Bagian 20: pelajaran pertama dalam rendering bersyarat
→ Bagian 21: pelajaran kedua dan lokakarya tentang rendering bersyarat
→ Bagian 22: tahap ketujuh bekerja pada aplikasi TODO, mengunduh data dari sumber eksternal
→ Bagian 23: pelajaran pertama tentang bekerja dengan formulir
→ Bagian 24: Pelajaran Bentuk Kedua
→ Bagian 25: Workshop bekerja dengan formulir
→ Bagian 26: arsitektur aplikasi, pola Container / Komponen
→ Bagian 27: proyek kursus

Pelajaran 42. Bekerja dengan formulir, bagian 2

→ Asli

Dalam pelajaran ini kita akan berbicara tentang bidang untuk memasukkan teks multi-line, tentang bendera, tentang tombol radio (mereka juga disebut "tombol radio"), dan tentang bidang dengan daftar. Sampai saat ini, kami hanya mempertimbangkan bekerja dengan bidang input teks biasa.
Berikut adalah kode untuk komponen App yang akan kami mulai dengan eksperimen hari ini:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value} = event.target       this.setState({           [name]: value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />                             {                   /**                    *    :                    *                    * <textarea />                    * <input type="checkbox" />                    * <input type="radio" />                    * <select>  <option>                    */               }                             <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Seperti inilah tampilan halaman aplikasi di browser pada tahap kerja ini.


Halaman aplikasi di browser

Formulir biasanya berisi tidak hanya bidang yang dimasukkan garis pendek. Ketika melengkapi formulir dengan elemen lain, bekerja dengannya dalam React sedikit rumit, meskipun tidak ada yang istimewa tentang ini.

Dalam kode di atas ada fragmen komentar yang berisi daftar elemen yang akan kita bicarakan. Mari kita mulai dengan bidang untuk memasukkan teks multi-baris - elemen textarea . Mungkin paling mudah untuk memahami cara bekerja dengannya. Jika Anda menggunakan elemen ini saat membuat form HTML biasa, Anda tahu bahwa ini bukan tag self-closing, seperti halnya dengan elemen input . Ini memiliki bagian pembukaan dan penutupan.
Tambahkan elemen ini ke formulir dengan menyisipkan, segera setelah komentar, kode berikut:

 <br /> <textarea></textarea> 

Jika sekarang Anda melihat halaman aplikasi, Anda dapat melihat bagaimana bidang untuk memasukkan teks multi-baris muncul di dalamnya.


Bidang untuk memasukkan teks pada halaman

Seperti yang Anda lihat, bidang ini sedikit lebih tinggi dari bidang biasa, pengguna dapat mengubah ukurannya menggunakan penanda di kanan bawahnya. Berkat cols rows dan cols Anda dapat menentukan dimensinya saat menjelaskan elemen ini. Dalam HTML biasa, jika Anda ingin memiliki beberapa teks di dalamnya setelah ditampilkan, ini dilakukan dengan memasukkan teks yang diinginkan antara tag pembuka dan penutup elemen. Dalam Bereaksi, bekerja dengan elemen-elemen seperti itu dibuat semirip mungkin dengan bekerja dengan elemen input , yang kita bicarakan terakhir kali. Yaitu, dalam Bereaksi, tag textarea menutup sendiri. Artinya, kode untuk menampilkan bidang pada halaman dapat diubah sebagai berikut:

 <textarea /> 

Anda dapat menggunakan atribut value dalam tag ini, apalagi, bekerja dengannya dilakukan dengan cara yang persis sama dengan atribut yang sama dari bidang teks biasa. Karena itu, keseragaman dicapai dalam bekerja dengan elemen yang berbeda, dan, di samping itu, lebih mudah untuk memperbarui konten bidang dengan memperbarui properti negara yang terkait dengan bidang tersebut. Mari membawa status kode bidang ke formulir ini:

 <textarea value={"Some default value"}/> 

Ini akan menyebabkan teks yang ditentukan muncul di bidang ketika itu ditampilkan pada halaman.


Teks yang muncul di bidang

Kami akan kembali bekerja dengan bidang untuk memasukkan teks multi-baris, tetapi untuk saat ini kita akan berbicara tentang bendera. Kotak centang adalah kontrol input yang tipenya adalah checkbox . Berikut ini uraiannya:

 <input type="checkbox" /> 

Di sini terlihat seperti apa bendera yang digambarkan oleh markup ini di halaman.


Kotak centang

Fitur utama dari kontrol ini adalah fakta bahwa atribut value tidak digunakan saat bekerja dengannya. Ini digunakan untuk memberi pengguna pilihan dua opsi, satu di antaranya sesuai dengan kotak centang, dan yang lainnya untuk yang tidak dicentang. Untuk melacak apakah kotak centang dicentang atau tidak dicentang, atribut yang checked digunakan, yang dijelaskan oleh nilai logis. Akibatnya, bendera biasanya sesuai dengan properti logis yang disimpan di negara bagian.

Mari kita bawa status komponen ke formulir ini:

 this.state = {   firstName: "",   lastName: "",   isFriendly: true } 

Kode deskripsi bendera diubah sebagai berikut:

 <input   type="checkbox"   checked={this.state.isFriendly} /> 

Setelah itu, kotak centang yang dipilih akan ditampilkan pada halaman.


Kotak centang

Benar, sekarang dia tidak akan menanggapi klik padanya. Faktanya adalah bahwa bendera terkait dengan variabel terkait yang disimpan di negara bagian, sebagai akibatnya, ketika kami mencoba, dalam kasus kami, untuk menghapusnya, Bereaksi, memeriksa keadaan, dan menemukan bahwa properti isFriendly disetel ke true , tidak mengizinkan ini. Pada saat yang sama, peringatan akan ditampilkan di konsol yang menyatakan bahwa kami tidak menyediakan mekanisme untuk mengubah bidang ( onChange event onChange ) dan bahwa itu ditampilkan dalam status hanya baca.


Peringatan Konsol

Kami mungkin menulis metode khusus untuk bekerja dengan flag, tetapi kode komponen kami sudah memiliki metode handleChange() . Sekarang digunakan untuk bekerja dengan bidang teks. Kami akan memikirkan cara menggunakannya untuk bekerja dengan bendera. Untuk melakukan ini, pertama tetapkan metode di atas sebagai onChange event onChange flag dan tetapkan flag nama yang sesuai dengan nama properti negara yang terkait dengan flag. Selain itu, kami akan menandatangani bendera menggunakan tag label :

 <label>    <input       type="checkbox"       name="isFriendly"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Is friendly? </label> 

Dalam metode handleChange() , kode yang ditunjukkan di bawah ini, ketika bekerja dengan bidang teks, kami menemukan nama elemen ( name ) dan isinya ( value ), setelah itu kami memperbarui keadaan dengan menulis padanya bidang apa dengan nama tertentu di dalamnya atribut value :

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

Sekarang kita perlu mencari tahu bagaimana menangani flag yang tidak memiliki atribut value . Ini hanya memiliki atribut yang checked , yang hanya dapat menerima nilai true atau false . Sebagai hasilnya, untuk menggunakan metode handleChange() untuk bekerja dengan sebuah flag, kita perlu memeriksa apakah elemen yang dipanggil oleh handler ini adalah sebuah flag. Untuk melakukan pemeriksaan ini, kami ingat bahwa tipe ( type ) dari elemen input yang mewakili flag diatur ke checkbox . Untuk memeriksa nilai ini, Anda bisa merujuk ke type properti elemen event.target . Kami akan mengekstrak properti ini dari event.target , serta properti yang checked , menggunakan konstruksi berikut:

 const {name, value, type, checked} = event.target 

Sekarang kita dapat memeriksa nilai konstanta type dan mencari tahu apakah elemen yang dipanggil oleh event handler adalah sebuah flag. Jika ini masalahnya, kami akan menulis ke negara bagian apa yang ternyata berada dalam konstanta yang checked . Jangan lupa untuk menyimpan kode yang bertanggung jawab untuk bekerja dengan bidang teks. Hasilnya, kode handleChange() mengambil bentuk berikut:

 handleChange(event) {   const {name, value, type, checked} = event.target   type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) } 

Setelah itu, periksa pengoperasian bendera.


Memeriksa pengoperasian bendera

Seperti yang Anda lihat, sekarang dapat dihapus dan diinstal. Pada saat yang sama, karya bidang teks tidak rusak. Pemberitahuan tentang kotak centang telah menghilang dari konsol, tetapi pemberitahuan ditampilkan di sana mengenai bidang untuk memasukkan teks multi-baris. Ubah kode yang menjelaskan bidang ini sebagai berikut:

 <textarea   value={"Some default value"}   onChange={this.handleChange} /> 

Ini akan menyebabkan hilangnya pemberitahuan, meskipun kami tidak menerapkan mekanisme lain untuk bekerja dengan bidang ini menggunakan alat komponen (tidak menentukan nama untuk bidang, tidak menambahkan properti yang sesuai ke negara). Anda dapat mengimplementasikan fitur-fitur ini sendiri. Sekarang mari kita bicara tentang sakelar.

Mereka dapat direpresentasikan sebagai kombinasi elemen input dari text dan tipe checkbox . Yang dimaksud di sini adalah sakelar memiliki atribut value dan atribut yang checked . Tambahkan beberapa sakelar ke formulir kami, buat kodenya berdasarkan kode deskripsi bendera. Begini tampilannya:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Female </label> 

Kami membuat kode ini berdasarkan kode deskripsi bendera dan masih belum mengedit sesuatu. Oleh karena itu, sakelar berperilaku aneh. Secara khusus, jika kotak centang tidak dicentang, maka kedua sakelar berada dalam status "mati", dan jika Anda memilih kotak centang, salah satunya ternyata "aktif". Kesalahan tersebut dapat dicegah dengan memperlakukan kode elemen dengan hati-hati jika kode tersebut dibuat berdasarkan kode elemen yang ada. Sekarang kita akan memperbaikinya.
Harap perhatikan bahwa kedua elemen ini memiliki nama yang sama - gender . Berganti dengan nama yang sama dari grup. Hanya satu sakelar yang termasuk dalam grup tersebut yang dapat dipilih.

Saat mengonfigurasi sakelar, Anda tidak bisa hanya menunjukkan bahwa nilai yang checked ditetapkan, katakanlah, menjadi true jika beberapa properti negara true . Switch harus mendukung sinkronisasi, di dalam grup, berubah di negara mereka sendiri. Sebagai gantinya, nilai yang checked dari sakelar ditentukan oleh kondisi. Dalam kasus kami, kondisi ini akan diwakili dengan membandingkan properti negara this.state.gender dengan string male atau female . Dalam kode deskripsi sakelar, tampilannya seperti ini:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.gender === "male"}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.gender === "female"}       onChange={this.handleChange}   /> Female </label> 

Sekarang tambahkan properti baru, gender , ke negara, inisialisasi dengan string kosong:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "" } 

Setelah itu, sakelar akan bekerja terlepas dari kotak centang. Tambahkan ke output kode oleh komponen header tingkat kedua yang menampilkan informasi tentang saklar mana yang dipilih:

 <h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2> 

Di sini, mungkin, ada baiknya memperkenalkan beberapa mekanisme rendering bersyarat. Ini akan memungkinkan, ketika membuka halaman, ketika tidak ada tombol radio yang dipilih, untuk memastikan bahwa teks You are a tidak akan ditampilkan di dalamnya, tetapi kami tidak akan melakukan ini, meskipun Anda dapat menerapkannya sendiri. Sekarang mari kita lihat apa yang kita dapat.


Mengaktifkan halaman aplikasi

Segala sesuatu yang kita bicarakan di sini mungkin tampak cukup rumit. Secara khusus, ini menyangkut menghafal fitur kontrol yang berbeda. Untuk menyederhanakan pekerjaan dengan formulir, Anda bisa menggunakan perpustakaan khusus. Misalnya, perpustakaan formik . Pustaka ini sangat menyederhanakan proses pengembangan formulir dalam aplikasi Bereaksi.

Sekarang mari kita bicara tentang bidang daftar.

Dalam HTML normal, konstruk berikut digunakan untuk menjelaskan kotak kombo:

 <select>   <option></option>   <option></option>   <option></option> <select/> 

Bereaksi mengambil pendekatan yang serupa, meskipun, seperti halnya dengan elemen lain, atribut value digunakan. Ini memudahkan untuk mengetahui item daftar mana yang dipilih, dan sebagai tambahan, membuatnya lebih mudah untuk bekerja dengan keadaan komponen.

Misalkan kita ingin membuat kotak kombo yang memungkinkan pengguna untuk memilih warna favoritnya. Untuk melakukan ini, Anda bisa meletakkan konstruksi berikut dalam atribut value dari elemen select : value={this.state.favColor} . Ini akan mendapatkan nilai yang dipilih pengguna. Sekarang tambahkan favColor ke negara:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "",   favColor: "blue" } 

Selanjutnya, kami melengkapi kotak kombo dengan onChange event onChange dan memberinya nama. Kami juga menetapkan nilai nilai untuk elemen options kotak kombo dan memasukkan teks yang akan ditampilkan dalam kotak.

Inilah yang terlihat seperti elemen select tanda tangan select dengan tanda tangan:

 <label>Favorite Color:</label> <select   value={this.state.favColor}   onChange={this.handleChange}   name="favColor" >   <option value="blue">Blue</option>   <option value="green">Green</option>   <option value="red">Red</option>   <option value="orange">Orange</option>   <option value="yellow">Yellow</option> </select> 

Sekarang tambahkan tulisan lain ke formulir yang menampilkan warna favorit pengguna:

 <h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2> 

Sudah waktunya untuk mencoba kotak kombo.


Kotak kombo

Seperti yang Anda lihat, meskipun bentuk kami tidak bersinar dengan kecanggihan desain, kontrol yang ditempatkan di atasnya berfungsi seperti yang diharapkan.

Berkat cara kontrol Bereaksi diatur dalam Bereaksi, mudah untuk menggunakan penangan yang sama untuk menangani acara mereka. Ini persis skema kerja yang digunakan dalam kasus kami. Satu-satunya fitur penangan handleChange() adalah kami harus menangani acara bendera dengan cara khusus.

Sekarang mari kita bicara tentang mengirimkan formulir atau memproses nilai-nilai yang dimasukkan setelah selesai. Ada dua pendekatan untuk melakukan tindakan tersebut. Saat menggunakan salah satunya, formulir harus dilengkapi dengan tombol:

 <button>Submit</button> 

Di HTML5, jika elemen button ditemukan dalam formulir, itu akan bertindak seperti elemen input lama dari tipe submit . Jika Anda mengklik tombol ini, suatu peristiwa dari formulir onSubmit itu sendiri akan dipicu. Jika Anda perlu melakukan sesuatu setelah mengisi formulir, Anda bisa menambahkan event onClick ke tombol, tetapi sebagai contoh, saya pribadi lebih suka menangani event semacam itu di level form, menugaskan onSubmit handler onSubmit untuk onSubmit :

 <form onSubmit={this.handleSubmit}> 

Metode yang digunakan sebagai penangan untuk acara ini belum ditulis. Ini adalah pengendali kejadian reguler, yang, misalnya, merujuk ke API tertentu, meneruskan data formulir ke dalamnya.

Ringkasan

Dalam pelajaran ini, kami menyimpulkan pembicaraan kami tentang bekerja dengan formulir di Bereaksi. Lain kali Anda akan menemukan pekerjaan praktis tentang topik ini.

Pembaca yang budiman! Jika Anda mencoba menggunakan pustaka formik untuk membuat formulir di Bereaksi, beri tahu kami tentang hal itu.