Formulir Reaksi
Sama seperti di HTML, React menggunakan formulir untuk memungkinkan pengguna berinteraksi dengan halaman web.
Menambahkan Formulir di React
Anda menambahkan formulir dengan Bereaksi seperti elemen lainnya:
Contoh:
Tambahkan formulir yang memungkinkan pengguna memasukkan nama mereka:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Ini akan berfungsi seperti biasa, formulir akan dikirimkan dan halaman akan disegarkan.
Tapi ini umumnya bukan yang kita inginkan terjadi di React.
Kami ingin mencegah perilaku default ini dan membiarkan React mengontrol formulir.
Formulir Penanganan
Menangani formulir adalah tentang bagaimana Anda menangani data saat data berubah nilai atau dikirimkan.
Dalam HTML, data formulir biasanya ditangani oleh DOM.
Di React, data formulir biasanya ditangani oleh komponen.
Ketika data ditangani oleh komponen, semua data disimpan dalam status komponen.
Anda dapat mengontrol perubahan dengan menambahkan event handler di
onChangeatribut.
Kita dapat menggunakan useStateHook untuk melacak setiap nilai input dan menyediakan "satu sumber kebenaran" untuk seluruh aplikasi.
Lihat bagian React Hooks untuk informasi lebih lanjut tentang Hooks.
Contoh:
Gunakan onChangeHook untuk mengelola input:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Dapatkan Sertifikasi!
$95 DAFTAR
Mengirimkan Formulir
Anda dapat mengontrol tindakan submit dengan menambahkan event handler di onSubmitatribut untuk <form>:
Contoh:
Tambahkan tombol kirim dan pengendali acara di onSubmitatribut:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Beberapa Bidang Masukan
Anda dapat mengontrol nilai lebih dari satu bidang input dengan menambahkan
nameatribut ke setiap elemen.
Kami akan menginisialisasi negara kami dengan objek kosong.
Untuk mengakses bidang di event handler gunakan
sintaks event.target.nameand
.event.target.value
Untuk memperbarui status, gunakan tanda kurung siku [notasi braket] di sekitar nama properti.
Contoh:
Tulis formulir dengan dua bidang input:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Catatan: Kita menggunakan fungsi event handler yang sama untuk kedua field input, kita bisa menulis satu event handler untuk masing-masing field, tapi ini memberi kita kode yang lebih bersih dan merupakan cara yang lebih disukai di React.
area teks
Elemen textarea di React sedikit berbeda dari HTML biasa.
Dalam HTML nilai textarea adalah teks antara tag awal
<textarea>
dan tag akhir </textarea>.
<textarea>
Content of the textarea.
</textarea>Dalam React, nilai dari sebuah textarea ditempatkan dalam atribut value. Kami akan menggunakan useStateHook untuk mengatur nilai textarea:
Contoh:
Textarea sederhana dengan beberapa konten:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Pilih
Daftar drop-down, atau kotak pilih, di React juga sedikit berbeda dari HTML.
dalam HTML, nilai yang dipilih dalam daftar drop-down didefinisikan dengan selectedatribut:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>Di React, nilai yang dipilih didefinisikan dengan value
atribut pada selecttag:
Contoh:
Kotak pilih sederhana, di mana nilai yang dipilih "Volvo" diinisialisasi dalam konstruktor:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
Dengan membuat sedikit perubahan pada <textarea>and <select>, React mampu menangani semua elemen input dengan cara yang sama.