React Tutorial Bagian 23: Pelajaran Bentuk Pertama

Di bagian terjemahan tutorial Bereaksi ini, kita akan berbicara tentang bekerja dengan formulir. Secara khusus, pelajaran hari ini dikhususkan untuk mengatur interaksi komponen dan bidang teks.



→ 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 41. Bekerja dengan formulir, bagian 1

→ Asli

Formulir adalah bagian penting dari aplikasi web. Tetapi, ternyata, mereka yang terlibat dalam pengembangan Bereaksi, bekerja dengan bentuk biasanya menyebabkan kesulitan tertentu. Faktanya adalah Bereaksi bekerja dengan bentuk-bentuk dengan cara khusus. Dalam pelajaran ini, kita akan menggunakan proyek standar yang dibuat oleh create-react-app, bentuk awal dari file App.js yang disajikan di bawah ini.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Harap dicatat bahwa untuk menguasai materi pelajaran ini, Anda harus terbiasa dengan konsep kondisi aplikasi. Jika Anda telah mengerjakan semua pelajaran sebelumnya dan menyelesaikan lokakarya secara mandiri, ini berarti Anda memiliki pengetahuan yang Anda perlukan di sini. Berikut adalah dokumentasi Bereaksi pada formulir. Anda disarankan untuk melihatnya sebelum melanjutkan.

Jadi, dalam Bereaksi, formulir bekerja sedikit berbeda dari menggunakan JavaScript biasa. Yaitu, dalam pendekatan yang biasa, formulir dijelaskan menggunakan HTML di halaman web, setelah itu, menggunakan DOM API, mereka berinteraksi dengan mereka dari JavaScript. Secara khusus, dengan mengklik tombol kirim, mereka mengumpulkan data dari bidang yang diisi oleh pengguna dan mempersiapkan mereka untuk dikirim ke server, memeriksa mereka, dan, jika perlu, memberi tahu pengguna bahwa ia salah mengisi beberapa bidang. Di Bereaksi, alih-alih menunggu semua materi dimasukkan ke dalam bidang formulir sebelum melanjutkan dengan pemrosesan perangkat lunak mereka, data secara terus-menerus dipantau menggunakan status aplikasi. Ini, misalnya, bermuara pada fakta bahwa setiap karakter yang dimasukkan oleh pengguna dari keyboard segera memasuki negara. Akibatnya, dalam aplikasi Bereaksi kami dapat dengan cepat bekerja dengan versi terbaru dari apa yang dimasukkan pengguna ke dalam bidang formulir. Untuk menunjukkan gagasan ini dalam tindakan, kami mulai dengan deskripsi formulir yang berisi bidang teks biasa.

Untuk melakukan ini, dalam kode yang dikembalikan metode render() , kami menjelaskan formulir. Dalam pendekatan yang biasa, formulir seperti itu akan memiliki tombol, dengan mengklik di mana mekanisme program aplikasi mulai memproses data yang dimasukkan ke dalam formulir ini. Dalam kasus kami, data yang dimasukkan oleh pengguna di bidang akan masuk ke aplikasi saat dimasukkan. Untuk melakukan ini, kita perlu menangani onChange lapangan onChange . Dalam penangan acara ini (sebut saja handleChange() ) kami akan memperbarui status dengan menulis apa yang dimasukkan ke dalam bidang. Untuk melakukan ini, kita perlu, pertama, untuk mengetahui apa yang terkandung di lapangan, dan kedua, untuk menempatkan data ini dalam keadaan. Di negara bagian, buat properti yang menyimpan konten bidang. Kami akan menggunakan bidang ini untuk menyimpan nama depan pengguna, jadi kami akan memanggil properti firstName sesuai dan menginisialisasi dengan string kosong.

Setelah itu, di dalam konstruktor, kita akan melampirkan handler event handleChange() handler event ke this dan pada kode handler kita akan menggunakan fungsi setState() . Karena nilai sebelumnya yang disimpan di properti status firstName tidak menarik bagi kami, kami bisa dengan mudah mengirimkan objek dengan nilai firstName baru ke fungsi ini. Apa yang harus ditulis ke properti ini?

Jika Anda ingat bagaimana penangan event bekerja dalam JavaScript, ternyata ketika mereka dipanggil, mereka dilewatkan beberapa parameter yang telah ditentukan. Dalam kasus kami, objek acara diteruskan ke pawang. Ini berisi data yang menarik bagi kami. Bidang teks yang acara onChange yang kami proses diwakili dalam objek ini sebagai event.target . Dan isi dari bidang ini dapat diakses menggunakan konstruk event.target.value .

Sekarang, dalam metode render() , kita akan menampilkan apa yang akan disimpan dalam keadaan dan melihat apa yang kita dapatkan.

Berikut adalah kode yang mengimplementasikan ide-ide di atas.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           firstName: event.target.value       })   }     render() {       return (           <form>               <input type="text" placeholder="First Name" onChange={this.handleChange} />               <h1>{this.state.firstName}</h1>           </form>       )   } } export default App 

Ini adalah tampilannya di browser.


Halaman aplikasi di browser

Setiap karakter yang dimasukkan dalam bidang segera muncul di elemen <h1> yang ada di halaman.

Sekarang mari kita pikirkan tentang cara menambahkan bidang lain ke formulir, untuk nama belakang pengguna. Jelas, untuk menetapkan pemrosesan yang benar dari data yang dimasukkan dalam bidang ini, kita perlu menambahkan properti lain ke negara dan bekerja pada mekanisme yang memperbarui negara ketika memasukkan data di lapangan.

Salah satu pendekatan untuk memecahkan masalah ini adalah membuat event handler terpisah untuk bidang baru. Untuk formulir kecil dengan beberapa bidang input, ini adalah pendekatan yang sepenuhnya normal, tetapi jika kita berbicara tentang formulir dengan lusinan bidang, membuat event handler onChange terpisah untuk masing-masingnya bukan ide yang baik.

Untuk membedakan bidang dalam pengendali peristiwa yang sama saat diubah, kami akan menetapkan properti name ke bidang, yang akan kami buat persis sama dengan nama properti yang digunakan untuk menyimpan data bidang dalam keadaan ( firstName dan lastName ). Setelah itu, kita bisa, bekerja dengan objek acara yang diteruskan ke handler, mencari tahu nama field, perubahan yang menyebabkan doa, dan menggunakan nama ini. Kami akan menggunakannya dengan menetapkan nama properti negara di mana kami ingin menambahkan data yang diperbarui. Berikut adalah kode yang mengimplementasikan fitur ini:

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

Perhatikan bahwa dengan menyetel nama properti objek yang diteruskan ke setState() , kami setState() konstruksi event.target.name dalam tanda kurung segi empat.


Halaman aplikasi di browser

Halaman sekarang menampilkan apa yang dimasukkan di bidang pertama dan apa yang dimasukkan di bidang kedua.

Prinsip-prinsip bekerja dengan bidang teks yang baru saja kita periksa juga berlaku untuk bidang lain berdasarkan pada mereka. Misalnya, ini bisa berupa bidang untuk memasukkan alamat email, telepon, nomor. Data yang dimasukkan ke dalam bidang tersebut dapat diproses menggunakan mekanisme yang dibahas di atas, untuk pengoperasian yang penting bahwa nama bidang terkait dengan nama properti di negara bagian komponen yang menyimpan data bidang ini.

Kita akan berbicara tentang bekerja dengan elemen bentuk lain di pelajaran selanjutnya. Di sini kita akan membahas topik lain yang berkaitan dengan apa yang disebut "komponen terkontrol", yang tentangnya Anda, jika Anda melihat dokumentasi Bereaksi pada formulir, telah membaca sesuatu.

Jika kami ingin apa yang ditampilkan di bidang sesuai dengan apa yang disimpan dalam status aplikasi, kami dapat menggunakan pendekatan yang dijelaskan di atas, di mana status diperbarui saat Anda memasukkan data di bidang. Kondisinya reaktif. Dan ketika menggunakan elemen bentuk yang dikelola komponen, apa yang ditampilkan dalam elemen-elemen ini dikendalikan oleh negara. Dengan pendekatan ini itulah satu-satunya sumber data komponen yang benar. Untuk mencapai ini, cukup menambahkan atribut value ke kode yang menggambarkan elemen formulir, menunjukkan properti negara yang sesuai dengan bidang. Seperti apa kode aplikasi sekarang akan terlihat.

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.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}               />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

Setelah perubahan ini, aplikasi berfungsi persis seperti sebelumnya. Perbedaan utama dari versi sebelumnya adalah bahwa bidang menampilkan apa yang disimpan di negara.

Saya ingin memberikan satu saran yang akan menyelamatkan Anda di masa depan dari kesalahan yang sangat sulit untuk di-debug. Inilah yang terlihat seperti kode penanganan event onChange sekarang:

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

Disarankan bahwa alih-alih secara langsung mengakses properti dari objek event ketika membangun objek yang diteruskan ke setState() , ekstrak apa yang Anda butuhkan darinya terlebih dahulu:

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

Di sini kita tidak akan membahas detail tentang kesalahan yang dapat dihindari dengan membuat event handler dengan cara ini. Jika Anda tertarik, lihat SyntheticEvent dalam dokumentasi Bereaksi.

Ringkasan

Dalam pelajaran ini, Anda pertama-tama menjadi terbiasa dengan mekanisme untuk bekerja dengan bentuk di Bereaksi. Lain kali kita akan melanjutkan topik ini.

Pembaca yang budiman! Apakah Anda menggunakan pustaka tambahan saat bekerja dengan formulir di Bereaksi?