Bekerja dengan peristiwa pengguna

  • 3 menit

Peristiwa memungkinkan Anda menjalankan kode sebagai respons terhadap tindakan pengguna di aplikasi Anda. Karena JSX dibangun di JavaScript, XML, dan HTML, menambahkan pendengar peristiwa terlihat relatif akrab.

Anda menambahkan atribut ke HTML untuk menunjukkan nama peristiwa yang ingin Anda tangani. Jika Anda ingin menggunakan alert untuk menampilkan pesan saat tombol dipilih, misalnya, Anda bisa menggunakan kode berikut:

class Demo extends React.Component {
    render() {
        <button onClick={ () => alert('Hello, world!') }>Click me!</button>
    }
}

Seperti yang mungkin Anda duga, kita dapat membuat fungsi untuk mendengarkan peristiwa juga. Kami menambahkan fungsi ke komponen kami. Kami kemudian menyebutnya dengan menggunakan sintaks yang sama dengan yang kami gunakan untuk alert.

class Demo extends React.Component {
    displayMessage() {
        alert('Hello, world!');
    }

    render() {
        <button onClick={ () => displayMessage() }>Click me!</button>
    }
}

Kita juga dapat meneruskan parameter ke penanganan aktivitas sesuai kebutuhan.

class Demo extends React.Component {
    displayMessage(message) {
        alert(message);
    }

    render() {
        <button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
    }
}