React Event Handling Guide

Adakah keseluruhan halaman web anda dimuat semula apabila anda mengklik butang? Adakah kotak input anda gagal mengemas kini state semasa anda menaip? Anda mungkin menghadapi isu-isu ini jika anda tidak mengendalikan acara dengan betul dalam React.

Pengendalian acara bermaksud menangkap tindakan pengguna seperti klik, hantar (submit), atau perubahan dan bertindak balas terhadapnya. React menggunakan sistem yang dipanggil SyntheticEvent. Ini memastikan kod anda berfungsi dengan cara yang sama merentasi semua pelayar seperti Chrome, Safari, dan Firefox.

Perbezaan utama antara acara HTML dan React:

  • Penamaan: Gunakan camelCase dalam React. Gunakan onClick dan bukannya onclick.
  • Pengendali: Masukkan rujukan fungsi dalam React. Gunakan kurungan beralun {} dan bukannya rentetan (strings).
  • Pencegahan: Sentiasa panggil event.preventDefault() untuk menghentikan tingkah laku lalai pelayar.

Bagaimana React mengendalikan acara:

React tidak memasang pendengar (listeners) pada setiap nod. Ia menggunakan Event Delegation. Ia memasang satu pendengar tunggal pada elemen akar (root element). Ini menjimatkan memori dan meningkatkan prestasi.

Corak biasa untuk digunakan:

  • Click Counter: Gunakan fungsi untuk mengemas kini state apabila pengguna mengklik butang.
  • Pengendalian Borang: Gunakan event.target.name dan event.target.value untuk mengemas kini pelbagai medan input dengan satu fungsi. Sentiasa gunakan event.preventDefault() semasa penghantaran borang untuk menghentikan muat semula halaman.
  • Menghantar Argumen: Jika anda perlu menghantar ID ke dalam fungsi, gunakan fungsi anak panah (arrow function). Tulis onClick={() => handleDelete(id)}. Jangan tulis onClick={handleDelete(id)} kerana ia akan dijalankan serta-merta semasa render.

Elakkan kesilapan ini:

  • Gelung Infiniti (Infinite Loops): Jangan sesekali memanggil fungsi secara terus dalam atribut onClick. Ini mencetuskan kemas kini state semasa render, yang menyebabkan render seterusnya berlaku.
  • Acara Tidak Ditakrifkan (Undefined Events): Sentiasa sertakan parameter event dalam definisi fungsi anda jika anda perlu memanggil preventDefault().
  • Kebocoran Memori (Memory Leaks): Jika anda menambah pendengar manual seperti window.addEventListener dalam hook useEffect, sentiasa buangnya dalam fungsi pembersihan (cleanup function).

Amalan terbaik untuk prestasi:

  • Elakkan mencipta fungsi baharu di dalam gelung .map() jika senarai anda sangat besar.
  • Gunakan hook useCallback apabila menghantar pengendali ke komponen anak.
  • Bersihkan pendengar acara tersuai untuk memastikan aplikasi anda kekal pantas.

Menguasai acara adalah kunci untuk membina aplikasi React yang interaktif.

Sumber: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69