Apa itu Event Handling dalam React?

Event handling dalam React adalah cara untuk menangani kejadian atau peristiwa yang terjadi pada elemen DOM, seperti klik tombol, input teks, atau pergerakan mouse. React menangani event dengan cara yang mirip dengan event pada elemen DOM, tetapi menggunakan sintaks JavaScript modern dan fitur khusus React.

Contoh Event Handling

Berikut adalah contoh sederhana bagaimana menangani event dalam React, baik dengan komponen kelas maupun komponen fungsional.

Komponen Kelas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling in React</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

      class ClickCounter extends React.Component {
        constructor(props) {
          super(props);
          this.state = { count: 0 };
          this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
          this.setState(state => ({
            count: state.count + 1
          }));
        }

        render() {
          return (
            <div>
              <h1>Count: {this.state.count}</h1>
              <button onClick={this.handleClick}>Increment</button>
            </div>
          );
        }
      }

      ReactDOM.render(
        <ClickCounter />,
        document.getElementById('root')
      );

    </script>
</body>
</html>

Penjelasan

handleClick method: Method ini dipanggil ketika tombol diklik. Metode ini menggunakan this.setState untuk memperbarui state count.
onClick event: Event ini dilampirkan ke tombol dan memanggil handleClick ketika tombol diklik.

Komponen Fungsional

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling in React</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

      function ClickCounter() {
        const [count, setCount] = React.useState(0);

        const handleClick = () => {
          setCount(count + 1);
        };

        return (
          <div>
            <h1>Count: {count}</h1>
            <button onClick={handleClick}>Increment</button>
          </div>
        );
      }

      ReactDOM.render(
        <ClickCounter />,
        document.getElementById('root')
      );

    </script>
</body>
</html>

Penjelasan

handleClick function: Fungsi ini dipanggil ketika tombol diklik. Fungsi ini menggunakan setCount untuk memperbarui state count.
onClick event: Event ini dilampirkan ke tombol dan memanggil handleClick ketika tombol diklik.

Daftar Event yang Didukung React

Berikut adalah beberapa event yang didukung oleh React:

Event

Deskripsi

onClick

Dipicu ketika elemen diklik

onChange

Dipicu ketika nilai input berubah

onMouseOver

Dipicu ketika mouse berada di atas elemen

onMouseOut

Dipicu ketika mouse meninggalkan elemen

onKeyDown

Dipicu ketika tombol keyboard ditekan

onKeyUp

Dipicu ketika tombol keyboard dilepas

onSubmit

Dipicu ketika form dikirim

Sumber

Dengan memahami event handling dalam React, Anda dapat membuat aplikasi yang interaktif dan responsif terhadap tindakan pengguna. Event handling adalah konsep penting dalam pengembangan aplikasi React dan memungkinkan pengembang untuk mengontrol perilaku aplikasi secara dinamis.

PreviousApa itu Props dan State dalam React?NextApa itu Component Lifecycle dalam React?

Last updated 9 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Handling in React</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class ClickCounter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ count: state.count + 1 })); } render() { return ( <div> <h1>Count: {this.state.count}</h1> <button onClick={this.handleClick}>Increment</button> </div> ); } } ReactDOM.render( <ClickCounter />, document.getElementById('root') ); </script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Handling in React</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> function ClickCounter() { const [count, setCount] = React.useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <h1>Count: {count}</h1> <button onClick={handleClick}>Increment</button> </div> ); } ReactDOM.render( <ClickCounter />, document.getElementById('root') ); </script> </body> </html>