Pemprosesan Data Borang dengan Mengklik Butang dalam React
Dalam pelajaran sebelumnya, kita membuat supaya apabila aksara dimasukkan ke dalam input, hasilnya akan muncul serta-merta dalam perenggan. Ini sememangnya kelihatan cantik, tetapi mempunyai kelemahan.
Bayangkan kita perlu melakukan operasi yang "berat", yang memakan banyak sumber. Tidak begitu optimum untuk melakukannya pada setiap aksara yang dimasukkan - lebih baik menunggu sehingga data dimasukkan sepenuhnya dan kemudian melaksanakan operasi yang diperlukan sekali sahaja dan memaparkan hasilnya dalam perenggan.
Untuk ini, kita perlu memperkenalkan butang, yang apabila diklik, operasi berat kita akan dilakukan. Dalam kes ini, setiap input sekali lagi akan mempunyai keadaan (state) sendiri, tambah satu lagi keadaan diperlukan untuk merekodkan hasil operasi dan memaparkannya pada skrin.
Mari lihat contoh. Katakan kita mempunyai dua input dan satu butang. Apabila butang diklik, mari cari jumlah nombor yang dimasukkan ke dalam input.
Mari laksanakan:
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>;
}
Boleh menggunakan versi ringkas:
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>;
}
Diberi dua input, dua butang dan satu perenggan. Katakan nombor dimasukkan ke dalam input. Apabila butang pertama diklik, cari jumlah nombor, dan apabila butang kedua diklik - cari hasil darab. Hasilkan hasil dalam perenggan.
Diberi dua input, satu butang dan satu perenggan. Katakan tarikh dimasukkan ke dalam input dalam format 2025-12-31. Apabila butang diklik, cari perbezaan antara tarikh dalam hari dan hasilkan hasil dalam perenggan.
Ubah suai tugas sebelumnya supaya secara lalai, input mengandungi tarikh semasa.
Diberi satu input dan satu perenggan. Nombor dimasukkan ke dalam input. Apabila fokus hilang, hasilkan dalam perenggan jumlah digit nombor yang dimasukkan.
Diberi satu input dan satu perenggan. Nombor dimasukkan ke dalam input. Apabila fokus hilang, hasilkan dalam perenggan hasil darab pembahagi nombor yang dimasukkan.
