Peristiwa Pengendalian Harian dalam React

Selamat datang ke Hari 6 siri "30 Hari ReactJS" kami! Hari ini, kita menyelami Mengendalikan Acara dalam React. Memahami pengendalian acara adalah penting untuk mencipta aplikasi interaktif dan mesra pengguna.

Apakah itu Pengendalian Acara?

Pengendalian acara dalam React membolehkan anda membalas tindakan pengguna seperti klik, penyerahan borang atau input papan kekunci. Dalam React, acara dikendalikan dengan cara yang serupa dengan cara anda mengendalikannya dalam HTML/JavaScript biasa, tetapi dengan beberapa perbezaan utama yang sesuai dengan model deklaratif React.

Asas Pengendalian Acara React

Dalam React, pengendali acara diserahkan sebagai prop kepada elemen React. Tidak seperti HTML biasa, pengendali acara React menggunakan sintaks camelCase dan bukannya huruf kecil. Contohnya, onClick dan bukannya onclick.

Contoh: Pengendali Klik Butang Asas

import React from 'react';

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

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

export default ClickButton;

Dalam contoh ini, fungsi handleClick dilaksanakan apabila butang diklik, memaparkan amaran.

Contoh Kehidupan Sebenar: Mesin ATM
Bayangkan mesin ATM di mana anda memasukkan PIN anda dan pilih jumlah untuk dikeluarkan. Setiap butang ditekan (seperti memasukkan digit atau memilih jumlah pengeluaran) mencetuskan peristiwa. Dalam React, anda mengendalikan interaksi ini menggunakan pengendali acara.

Objek Acara

Pengendali acara bertindak balas menerima objek acara sebagai hujah. Objek ini mengandungi maklumat tentang acara, seperti elemen sasaran dan jenis acara.

Contoh: Mengendalikan Perubahan Input

import React, { useState } from 'react';

function InputForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>You typed: {value}</p>
    </div>
  );
}

export default InputForm;

Di sini, fungsi handleChange mengemas kini keadaan dengan nilai input, membolehkan anda melihat perkara yang ditaip dalam masa nyata.

Pengendali Acara Mengikat

Dalam komponen kelas, anda selalunya perlu mengikat pengendali acara kepada contoh komponen. Ini tidak diperlukan dalam komponen berfungsi dengan cangkuk, kerana fungsi terikat secara automatik.

Contoh: Mengikat dalam Komponen Kelas

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

Pengikatan memastikan bahawa ini merujuk kepada tika komponen dalam pengendali acara.

Pengendalian Acara dengan Vite

Dengan Vite sebagai alat pembangunan anda, pengendalian acara tetap mudah. Penyegaran pantas Vite membantu anda melihat perubahan serta-merta, menjadikannya lebih mudah untuk menguji dan nyahpepijat pengendali acara anda.

Membungkus

Mengendalikan acara ialah aspek asas React yang membolehkan aplikasi anda bertindak balas terhadap interaksi pengguna. Dengan melampirkan pengendali acara pada elemen, anda boleh menjadikan apl anda dinamik dan interaktif.

Esok, kami akan membina perkara ini dengan menerokai Membina Apl ReactJS Pertama Anda, di mana anda akan melihat cara pengendalian acara disepadukan ke dalam aplikasi yang lengkap.

Atas ialah kandungan terperinci Peristiwa Pengendalian Harian dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!