Peringkat pelatih: Mengendalikan Acara dalam React

Mengendalikan acara dalam React ialah aspek penting dalam mencipta aplikasi web interaktif. Panduan ini akan memperkenalkan anda kepada asas pengendalian acara dalam React, termasuk menambah pengendali acara, memahami peristiwa sintetik, menyampaikan hujah kepada pengendali acara, mencipta acara tersuai dan delegasi acara.

Pengendalian Acara

Menambah Pengendali Acara dalam JSX

Dalam React, anda boleh menambah pengendali acara terus dalam JSX anda. Pengendali acara ialah fungsi yang dipanggil apabila peristiwa tertentu berlaku, seperti klik butang atau penyerahan borang. Pengendalian acara React adalah serupa dengan pengendalian acara dalam HTML biasa, tetapi dengan sedikit perbezaan.

Contoh menambah pengendali acara:

import React from 'react';

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

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

export default App;

Dalam contoh ini, fungsi handleClick dipanggil apabila butang diklik. Atribut onClick dalam JSX digunakan untuk menentukan pengendali acara.

Peristiwa Sintetik

React menggunakan sistem yang dipanggil peristiwa sintetik untuk mengendalikan peristiwa. Peristiwa sintetik ialah pembalut silang pelayar di sekeliling sistem acara asli penyemak imbas. Ini memastikan acara berkelakuan secara konsisten merentas penyemak imbas yang berbeza.

Contoh acara sintetik:

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

Dalam contoh ini, fungsi handleInputChange merekodkan nilai medan input apabila ia berubah. Parameter peristiwa ialah peristiwa sintetik yang menyediakan sifat peristiwa yang konsisten merentas semua penyemak imbas.

Menghantar Hujah kepada Pengendali Acara

Kadangkala, anda perlu menyampaikan hujah tambahan kepada pengendali acara. Ini boleh dilakukan menggunakan fungsi anak panah atau kaedah bind.

Contoh menggunakan fungsi anak panah:

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

Contoh menggunakan kaedah bind:

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

Kedua-dua kaedah membenarkan anda menghantar argumen tambahan kepada fungsi handleClick.

Pengendalian Acara Tersuai

Mencipta Acara Tersuai

Walaupun peristiwa sintetik React merangkumi kebanyakan kes penggunaan biasa, anda mungkin perlu membuat acara tersuai untuk interaksi yang lebih kompleks. Acara tersuai boleh dibuat dan dihantar menggunakan pembina CustomEvent dan kaedah dispatchEvent.

Contoh membuat dan menghantar acara tersuai:

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

Dalam contoh ini, acara tersuai bernama customEvent dibuat dan dihantar apabila butang diklik. Pengendali acara mendengar acara tersuai dan memaparkan makluman dengan mesej butiran acara.

Delegasi Acara dalam React

Delegasi acara ialah teknik di mana pendengar acara tunggal digunakan untuk mengurus acara untuk berbilang elemen. Ini berguna untuk mengurus acara dengan cekap, terutamanya dalam senarai atau jadual.

Contoh delegasi acara:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

Dalam contoh ini, pengendali acara tunggal pada elemen div menguruskan acara klik untuk semua butang. Pengendali acara menyemak acara.sasaran untuk menentukan butang yang telah diklik dan memaparkan makluman sewajarnya.

Kesimpulan

Mengendalikan acara dalam React adalah penting untuk mencipta aplikasi interaktif. Dengan memahami cara menambah pengendali acara, menggunakan peristiwa sintetik, menyampaikan hujah kepada pengendali acara, mencipta acara tersuai dan memanfaatkan perwakilan acara, anda boleh membina aplikasi React yang lebih dinamik dan cekap. Apabila anda memperoleh pengalaman, teknik ini akan menjadi sifat kedua, membolehkan anda mencipta interaksi yang kompleks dengan mudah.

Atas ialah kandungan terperinci Peringkat pelatih: Mengendalikan Acara dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!