Pengendalian Peristiwa dalam React: Mengurus Interaksi Pengguna Dengan Berkesan

Pengendalian Acara dalam React: Berinteraksi dengan Tindakan Pengguna

Pengendalian acara ialah konsep penting dalam React untuk mencipta aplikasi web interaktif. React menyediakan cara yang konsisten untuk mengendalikan acara merentas semua penyemak imbas, membolehkan pembangun bertindak balas terhadap tindakan pengguna seperti klik, penyerahan borang dan input papan kekunci.

1. Apakah Pengendalian Peristiwa dalam React?

Pengendalian acara dalam React ialah proses membalas interaksi pengguna dengan elemen dalam UI (seperti klik, penekanan kekunci atau pergerakan tetikus). React mempunyai sistem sendiri untuk menangani acara, yang berdasarkan pengendalian acara asli penyemak imbas tetapi disertakan dengan beberapa ciri khusus React.

Sistem Acara React

React membungkus peristiwa DOM asli ke dalam sistem acara sintetiknya sendiri untuk memastikan gelagat yang konsisten merentas penyemak imbas yang berbeza. Sistem ini lebih cekap kerana ia menggunakan delegasi acara, di mana pendengar acara tunggal dilampirkan pada akar dokumen dan acara dikendalikan semasa ia menggelembung.

2. Cara Mengendalikan Peristiwa dalam React

React menggunakan sintaks camelCase untuk nama acara dan lulus fungsi sebagai pengendali acara. Pengendali acara ditulis dalam bentuk fungsi atau fungsi anak panah.

Sintaks Asas untuk Pengendalian Acara

<button onClick={handleClick}>Click Me</button>

Contoh Fungsi Pengendali Acara

const handleClick = () => {
  alert("Button clicked!");
};

const App = () => {
  return <button onClick={handleClick}>Click Me</button>;
};

3. Peristiwa Biasa dalam React

React menyokong semua acara pelayar biasa, seperti:

• Acara Tetikus: onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseMove
• Acara Papan Kekunci: onKeyDown, onKeyUp, onKeyPress
• Acara Borang: onSubmit, onChange, onFocus, onBlur
• Acara Fokus: onFocus, onBlur
• Acara Papan Keratan: onCopy, onCut, onPaste
• Acara Sentuh: onTouchStart, onTouchMove, onTouchEnd

Contoh Mengendalikan Acara Tikus

const handleMouseOver = () => {
  console.log("Mouse is over the button!");
};

const App = () => {
  return <button onMouseOver={handleMouseOver}>Hover over me!</button>;
};

4. Menyampaikan Hujah kepada Pengendali Acara

React membolehkan anda menghantar argumen tambahan kepada fungsi pengendali acara. Anda boleh sama ada menghantar hujah terus dalam JSX atau menggunakan fungsi tanpa nama untuk berbuat demikian.

Menggunakan Fungsi Tanpa Nama

<button onClick={handleClick}>Click Me</button>

Menggunakan Kaedah .bind() (dalam komponen kelas)

const handleClick = () => {
  alert("Button clicked!");
};

const App = () => {
  return <button onClick={handleClick}>Click Me</button>;
};

5. Peristiwa Sintetik dalam React

Sistem acara sintetik React ialah pembalut silang penyemak imbas di sekeliling sistem acara asli penyemak imbas. Ini memastikan bahawa pengendali acara berkelakuan secara konsisten merentas persekitaran yang berbeza.

Faedah Acara Sintetik:

• Keserasian merentas penyemak imbas: React menjaga memastikan acara berfungsi sama dalam semua penyemak imbas.
• Pengoptimuman prestasi: React menggunakan delegasi acara, bermakna ia melampirkan hanya satu pendengar acara pada DOM akar, bukannya melampirkan pendengar individu pada setiap elemen.

6. Pengumpulan Acara dalam React

React menggunakan pengumpulan peristiwa untuk mengoptimumkan penggunaan memori. Apabila pengendali acara dipanggil, objek acara dikitar semula atas sebab prestasi dan sifatnya terbatal. Jika anda perlu mengakses sifat acara secara tidak segerak, anda harus memanggil event.persist() untuk mengalih keluarnya daripada kolam.

Contoh Penggabungan Acara

const handleMouseOver = () => {
  console.log("Mouse is over the button!");
};

const App = () => {
  return <button onMouseOver={handleMouseOver}>Hover over me!</button>;
};

7. Mengendalikan Borang dalam React

Dalam React, acara borang dikendalikan dengan cara yang berbeza sedikit daripada borang HTML tradisional. Anda biasanya mengurus data borang menggunakan keadaan dan mengemas kini keadaan apabila nilai input berubah.

Contoh Pengendalian Borang dalam React

const handleClick = (name) => {
  alert(`Hello, ${name}`);
};

const App = () => {
  return <button onClick={() => handleClick("John")}>Click Me</button>;
};

8. Pengendalian Acara dalam Komponen Kelas

Dalam komponen kelas, pengendali acara biasanya ditakrifkan sebagai kaedah kelas dan anda perlu mengikatnya dengan konteks ini yang betul untuk mengakses keadaan komponen atau kaedah lain.

Contoh Pengendalian Acara dalam Komponen Kelas

<button onClick={handleClick}>Click Me</button>

9. Amalan Terbaik untuk Pengendalian Acara

• Gunakan Fungsi Anak Panah atau .bind() Berhati-hati: Dalam komponen berfungsi, fungsi anak panah biasanya digunakan dalam JSX, tetapi dalam komponen kelas, pastikan untuk mengikat pengendali acara kepada konteks yang betul dalam pembina.
• Cegah Gelagat Lalai: Sentiasa gunakan event.preventDefault() apabila mengendalikan penyerahan borang atau tindakan penyemak imbas lalai yang lain.
• Nyahlantun Input Pengguna: Apabila mengendalikan input pengguna seperti menaip atau menatal, gunakan nyahlantun untuk mengelak daripada mencetuskan kemas kini yang berlebihan.

10. Kesimpulan

Pengendalian acara dalam React ialah bahagian asas dalam mencipta UI interaktif. Dengan memanfaatkan sistem acara sintetik React dan kuasa cangkuk atau kaedah kelas, pembangun boleh mengurus interaksi pengguna dengan cekap dan mengemas kini UI sebagai tindak balas kepada peristiwa tersebut. Memahami cara acara berfungsi dalam React adalah penting untuk membina aplikasi dinamik yang bertindak balas kepada tindakan pengguna.

Atas ialah kandungan terperinci Pengendalian Peristiwa dalam React: Mengurus Interaksi Pengguna Dengan Berkesan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!