Event React JS

Sama seperti HTML, React dapat melakukan tindakan berdasarkan peristiwa pengguna.

React memiliki event yang sama dengan HTML: klik, ubah, arahkan mouse, dll.

Menambahkan Event

Event React ditulis dalam sintaks camelCase:

onClick bukannya onclick.

Penangan event yang sebenarnya ditulis di dalam kurung kurawal:

onClick={shoot}  bukannya onClick="shoot()".

React:

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

Handler Event

Praktik yang baik adalah menempatkan handler event sebagai metode di kelas komponen:

Contoh:

Masukkan fungsi shoot di dalam komponen Football:

class Football extends React.Component {
  shoot() {
    alert("Great Shot!");
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));

Bind this

Untuk metode dalam React, kata kunci this harus mewakili komponen yang memiliki metode.

Itu sebabnya kamu harus menggunakan fungsi panah. Dengan fungsi panah, this akan selalu mewakili objek yang mendefinisikan fungsi panah.

Contoh:

class Football extends React.Component {
  shoot = () => {
    alert(this);
    /*
    The 'this' keyword refers to the component object
    */
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));

Mengapa Fungsi Arrow?

Dalam komponen kelas, kata kunci this tidak didefinisikan secara default, jadi dengan fungsi reguler kata kunci this mewakili objek yang disebut metode, yang dapat berupa objek jendela global, tombol HTML, atau apa pun.

Jika kamu harus menggunakan fungsi biasa alih-alih fungsi panah, kamu harus mengikat this ke komponen instance menggunakan metode bind():

Contoh:

Jadikan this ada di fungsi shoot dengan mengikatnya di fungsi constructor:

class Football extends React.Component {
  constructor(props) {
    super(props)
    this.shoot = this.shoot.bind(this)
  }
  shoot() {
    alert(this);
    /*
    Thanks to the binding in the constructor function,
    the 'this' keyword now refers to the component object
    */
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));

Tanpa ikatan, kata kunci this akan kembali undefined.

Melewati Argumen

Jika kamu ingin mengirim parameter ke event handler, kamu memiliki dua opsi:

1. Buat fungsi panah anonim:

Contoh:

Mengirim “Goal” sebagai parameter ke fungsi shoot , menggunakan fungsi panah:

class Football extends React.Component {
  shoot = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.shoot("Goal")}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));

Atau:

2. Ikat event handler ke this.

Perhatikan bahwa argumen pertama harus this.

Contoh:

Kirim “Goal” sebagai parameter ke fungsi shoot :

class Football extends React.Component {
  shoot(a) {
    alert(a);
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));

Catatan pada contoh kedua: Jika kamu mengirim argumen tanpa menggunakan metode bind, ( this.shoot(this, "Goal")bukan this.shoot.bind(this, "Goal")), fungsi shoot akan dieksekusi ketika halaman dimuat alih-alih menunggu tombol diklik.

React Event Object

Event handler memiliki akses ke React Event yang memicu fungsi.

Dalam contoh kami acara adalah acara “klik”. Perhatikan bahwa sekali lagi sintaksnya berbeda ketika menggunakan fungsi arrow atau tidak.

Dengan fungsi arrow kamu harus mengirim argumen acara secara manual:

Contoh:

Fungsi arrow: Mengirim objek acara secara manual:

class Football extends React.Component {
  shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }
  render() {
    return (
      <button onClick={(ev) => this.shoot("Goal", ev)}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));

Tanpa fungsi panah, objek Bereaksi acara dikirim secara otomatis sebagai argumen terakhir saat menggunakan metode bind():

Contoh:

Dengan metode bind() ini, objek acara dikirim sebagai argumen terakhir:

class Football extends React.Component {
  shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>Take the shot!</button>
    );
  }
}
 
ReactDOM.render(<Football />, document.getElementById('root'));