Memproses Data Formulir dengan Mengklik Tombol di React
Dalam pelajaran sebelumnya, kita membuatnya sehingga saat karakter dimasukkan ke dalam input, hasilnya langsung muncul di paragraf. Ini tentu saja terlihat indah, tetapi memiliki kekurangan.
Bayangkan kita perlu melakukan operasi "berat" yang memakan banyak sumber daya. Tidak terlalu optimal melakukannya pada setiap input karakter - lebih baik menunggu hingga data selesai dimasukkan dan kemudian melakukan operasi yang diperlukan satu kali dan menampilkan hasilnya di paragraf.
Untuk ini, kita perlu memperkenalkan tombol, yang ketika ditekan akan melakukan operasi yang memakan sumber daya kita. Dalam hal ini, setiap input akan kembali memiliki state-nya sendiri, ditambah satu state lagi yang kita perlukan untuk mencatat hasil operasi dan menampilkannya di layar.
Mari kita lihat contohnya. Misalkan kita memiliki dua input dan sebuah tombol. Saat tombol ditekan, mari kita cari jumlah angka yang dimasukkan ke dalam input.
Mari kita implementasikan:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
Anda dapat menggunakan opsi yang disingkat:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
Diberikan dua input, dua tombol, dan sebuah paragraf. Misalkan angka dimasukkan ke dalam input. Saat tombol pertama ditekan, temukan jumlah angkanya, dan saat tombol kedua ditekan - hasil kali. Tampilkan hasilnya di paragraf.
Diberikan dua input, sebuah tombol, dan sebuah paragraf. Misalkan ke dalam input dimasukkan tanggal dalam format 2025-12-31. Saat tombol ditekan, temukan selisih antara tanggal dalam hari dan tampilkan hasilnya di paragraf.
Modifikasi tugas sebelumnya sehingga secara default, input diisi dengan tanggal saat ini.
Diberikan sebuah input dan sebuah paragraf. Sebuah angka dimasukkan ke dalam input. Saat kehilangan fokus, tampilkan di paragraf jumlah digit dari angka yang dimasukkan.
Diberikan sebuah input dan sebuah paragraf. Sebuah angka dimasukkan ke dalam input. Saat kehilangan fokus, tampilkan di paragraf hasil kali pembagi dari angka yang dimasukkan.
