Bekerja dengan form dan elemen form saat mengembangkan dengan React dapat menjadi rumit karena elemen form HTML berperilaku agak berbeda di React dibandingkan elemen DOM lainnya.
Pelajari cara bekerja dengan formulir dan elemen formulir seperti kotak centang, area teks, dan input teks baris tunggal.
Mengelola Bidang Input dalam Formulir
Di React, mengelola bidang input dalam formulir sering kali dilakukan dengan membuat status dan mengikatnya ke bidang input.
Contohnya:
fungsiAplikasi() {const [firstName, setFirstName] = React.useState('');
fungsihandleFirstNameChange(peristiwa) {
setFirstName( peristiwa.target.nilai )
}
kembali (
<membentuk>
<jenis masukan='teks' placeholder='Nama depan' onInput={handleFirstNameChange} />
</form>
)
}
Di atas kita memiliki nama depan negara bagian, an onInput peristiwa, dan a handleChange pawang. Itu handleChange fungsi berjalan pada setiap penekanan tombol untuk memperbarui nama depan negara.
Pendekatan ini mungkin ideal saat bekerja dengan satu bidang input, tetapi membuat status dan fungsi penangan untuk setiap elemen input akan menjadi berulang saat bekerja dengan banyak input bidang.
Untuk menghindari penulisan kode yang berulang dan berlebihan dalam situasi seperti itu, berikan nama yang berbeda untuk setiap bidang input, tetapkan objek sebagai nilai status awal formulir Anda, lalu isi objek dengan properti dengan nama yang sama dengan input bidang.
Misalnya:
fungsiAplikasi() {const [formData, setFormData] = React.useState(
{
nama depan: '',
nama keluarga: ''
}
);
kembali (
<membentuk>
<jenis masukan='teks' placeholder='Nama depan' nama='nama depan' />
<jenis masukan='teks' placeholder='Nama keluarga' nama='nama keluarga' />
</form>
)
}
Itu formData akan berfungsi sebagai variabel status untuk mengelola dan memperbarui semua kolom input di dalam formulir. Pastikan nama properti di objek status identik dengan nama elemen masukan.
Untuk memperbarui status dengan data input, tambahkan an onInput pendengar acara ke elemen input, lalu panggil fungsi penangan yang Anda buat.
Misalnya:
fungsiAplikasi() {const [formData, setFormData] = React.useState(
{
nama depan: '',
nama keluarga: ''
}
);
fungsihandleChange(peristiwa) {
setFormData( (prevState) => {
kembali {
...prevState,
[event.target.name]: peristiwa.target.nilai
}
})
}
kembali (
<membentuk>
<memasukkan
jenis='teks'
placeholder='Nama depan'
nama='nama depan'
onInput={handleChange}
/>
<memasukkan
jenis='teks'
placeholder='Nama keluarga'
nama='nama keluarga'
onInput={handleChange}
/>
</form>
)
}
Blok kode di atas menggunakan an onInput acara dan fungsi penangan, handleFirstNameChange. Ini handleFirstNameChange fungsi akan memperbarui properti negara saat dipanggil. Nilai properti status akan sama dengan elemen input yang sesuai.
Mengubah Input Anda Menjadi Komponen Terkendali
Saat formulir HTML dikirimkan, perilaku defaultnya adalah menavigasi ke halaman baru di browser. Perilaku ini tidak nyaman dalam beberapa situasi, seperti saat Anda menginginkannya memvalidasi data yang dimasukkan ke dalam formulir. Dalam kebanyakan kasus, Anda akan merasa lebih cocok untuk memiliki fungsi JavaScript dengan akses ke informasi yang dimasukkan ke dalam formulir. Ini dapat dengan mudah dicapai di React menggunakan komponen yang dikontrol.
Dengan file index.html, elemen formulir mempertahankan statusnya dan memodifikasinya sebagai respons terhadap input pengguna. Dengan React, fungsi set state memodifikasi state dinamis yang disimpan dalam properti state komponen. Anda dapat menggabungkan kedua status tersebut dengan menjadikan status React sebagai satu-satunya sumber kebenaran. Dengan cara ini, komponen yang membuat formulir mengontrol apa yang terjadi saat pengguna memasukkan data. Elemen formulir input dengan nilai yang dikontrol React disebut komponen terkontrol atau input terkontrol.
Untuk memanfaatkan input terkontrol dalam aplikasi React Anda, tambahkan prop nilai ke elemen input Anda:
fungsiAplikasi() {const [formData, setFormData] = React.useState(
{
nama depan: '',
nama keluarga: ''
}
);
fungsihandleChange(peristiwa) {
setFormData( (prevState) => {
kembali {
...prevState,
[event.target.name]: peristiwa.target.nilai
}
})
}
kembali (
<membentuk>
<memasukkan
jenis='teks'
placeholder='Nama depan'
nama='nama depan'
onInput={handleChange}
nilai={formData.firstName}
/>
<memasukkan
jenis='teks'
placeholder='Nama keluarga'
nama='nama keluarga'
onInput={handleChange}
nilai={formData.lastName}
/>
</form>
)
}
Atribut nilai dari elemen input sekarang diatur menjadi nilai properti negara yang sesuai. Nilai input selalu ditentukan oleh keadaan saat menggunakan komponen yang dikontrol.
Menangani Elemen Input Textarea
Itu textarea elemen seperti elemen input biasa tetapi memiliki input multi-baris. Ini berguna saat menyampaikan informasi yang membutuhkan lebih dari satu baris.
Dalam file index.html, file tag textarea elemen menentukan nilainya oleh anak-anaknya, seperti yang terlihat pada blok kode di bawah ini:
<textarea>
Halo apa kabarmu?
</textarea>
Dengan Bereaksi, untuk menggunakan textarea elemen, Anda dapat membuat elemen input dengan tipe textarea.
Seperti itu:
fungsiAplikasi() {kembali (
<membentuk>
<jenis masukan='textarea' nama='pesan'/>
</form>
)
}
Alternatif untuk menggunakan textarea sebagai tipe input adalah dengan menggunakan textarea tag elemen menggantikan tag jenis input, seperti yang terlihat di bawah ini:
fungsiAplikasi() {kembali (
<membentuk>
<textarea
nama='pesan'
nilai='Halo apa kabarmu?'
/>
</form>
)
}
Itu textarea tag memiliki atribut nilai yang menyimpan informasi pengguna yang dimasukkan ke dalam textarea elemen. Ini membuatnya berfungsi seperti elemen input React default.
Bekerja Dengan Elemen Input Kotak Centang React
Hal-hal sedikit berbeda saat bekerja dengan kotak centang input. Kolom input dari jenis kotak centang tidak memiliki atribut nilai. Namun, ia memiliki diperiksa atribut. Ini diperiksa atribut berbeda dari atribut nilai dengan meminta nilai boolean untuk menentukan apakah kotak dicentang atau tidak.
Misalnya:
fungsiAplikasi() {kembali (
<membentuk>
<jenis masukan='kotak centang' id='bergabung' nama='bergabung' />
<label htmlUntuk='bergabung'>Apakah Anda ingin bergabung dengan tim kami?</label>
</form>
)
}
Elemen label mengacu pada ID elemen input menggunakan htmlUntuk atribut. Ini htmlUntuk atribut menerima ID dari elemen input—dalam hal ini, bergabung. Kapan membuat formulir HTML, itu htmlUntuk atribut mewakili untuk atribut.
Itu kotak centang lebih baik digunakan sebagai input yang terkontrol. Anda dapat mencapainya dengan membuat status dan memberinya nilai boolean awal benar atau salah.
Anda harus menyertakan dua alat peraga di kotak centang elemen masukan: a diperiksa properti dan an dalam perubahan acara dengan fungsi handler yang akan menentukan nilai negara menggunakan setIsChecked() fungsi.
Misalnya:
fungsiAplikasi() {const [isChecked, setIsChecked] = React.useState(PALSU);
fungsihandleChange() {
setIsChecked( (prevState) => !prevState )
}
kembali (
<membentuk>
<memasukkan
jenis='kotak centang'
id='bergabung'
nama='bergabung'
diperiksa={diperiksa}
onChange={handleChange}
/>
<label htmlUntuk='bergabung'>Apakah Anda ingin bergabung dengan tim kami?</label>
</form>
)
}
Blok kode ini menghasilkan file isChecked state, dan menetapkan nilai awalnya ke PALSU. Ini menetapkan nilai dari isChecked ke diperiksa atribut dalam elemen masukan. Itu handleChange fungsi akan menyala dan mengubah nilai status isChecked ke kebalikannya setiap kali Anda mengklik kotak centang.
Elemen formulir mungkin berisi beberapa elemen input dari jenis yang berbeda, seperti kotak centang, teks, dll.
Dalam kasus seperti itu, Anda dapat menanganinya dengan cara yang mirip dengan cara Anda menangani beberapa elemen input dengan tipe yang sama.
Ini contohnya:
fungsiAplikasi() {membiarkan[formData, setFormData] = React.useState(
{
nama depan: ''
bergabung: BENAR,
}
);
fungsihandleChange(peristiwa) {
const {nama, nilai, tipe, dicentang} = event.target;
setFormData( (prevState) => {
kembali {
...prevState,
[nama]: jenis kotak centang? diperiksa: nilai
}
})
}
kembali (
<membentuk>
<memasukkan
jenis='teks'
placeholder='Nama depan'
nama='nama depan'
onInput={handleChange}
nilai={formData.firstName}
/>
<memasukkan
jenis='kotak centang'
id='bergabung'
nama='bergabung'
dicentang={formData.join}
onChange={handleChange}
/>
<label htmlUntuk='bergabung'>Apakah Anda ingin bergabung dengan tim kami?</label>
</form>
)
}
Perhatikan bahwa di handleChange fungsi, setFormData menggunakan operator ternary untuk menetapkan nilai dari diperiksa properti ke properti negara jika tipe input target adalah a kotak centang. Jika tidak, itu memberikan nilai-nilai dari nilai atribut.
Sekarang Anda Dapat Menangani Formulir Bereaksi
Anda telah mempelajari cara bekerja dengan formulir di React menggunakan berbagai elemen masukan formulir di sini. Anda juga belajar cara menerapkan input terkontrol ke elemen formulir Anda dengan menambahkan prop nilai atau prop yang dicentang saat bekerja dengan kotak centang.
Penanganan elemen masukan formulir React yang efisien akan meningkatkan kinerja aplikasi React Anda, sehingga menghasilkan pengalaman pengguna yang lebih baik secara menyeluruh.
