Skip to content

1. Event Handling

Event Handling adalah cara program/aplikasi merespons aksi yang terjadi, seperti mengklik tombol, mengetikkan sesuatu, atau melakukan event lain. Ketika suatu event terjadi, program akan mengeksekusi event yang telah ditentukan sebelumnya untuk merespons aksi tersebut. Event handling memungkinkan program/aplikasi berinteraksi dengan user secara dinamis.

Ada beberapa contoh event yang sering kita gunakan di HTML, seperti berikut

  • mouse: ada event onClick, onDoubleClick, onMouseEnter, onContextMenu, onDrag, onDrop.
  • keyboard: ada event onKeyDown, onKeyUp, & onKeyPress.
  • focus: ada event onFocus & onBlur
  • form: ada event onSubmit, onInput, & onChange
  • clipboard: ada event onCopy, onCut, & onPaste
  • selection: ada event onSelect
  • image: ada event onLoad & onError
  • touch: ada event onTouchStart, onTouchCancel, onTouchEnd & onTouchMove
  • UI: ada event onScroll

Penulisan event pada property element menggunakan camelCase seperi onChange, onClick dan lain-lain. Pada materi state, kita sudah menggunakan event yang ada pada property element dengan cara inline.

app/page.ts
...

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />


      </div>
    </main>
  );
};

export default Home;

event di property akan memanggil function, baik itu secara inline maupun kita dekralasikan terlebih dahulu. Dalam membuat event di ReactJS , kita dapat menggunakan beberapa cara sebagai berikut.

1. Event dengan Inline

Inline artinya kita langsung memanggil function di dalam event tanpa dideklarasikan terlebuh dahulu.

app/page.ts
...

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />


      </div>
    </main>
  );
};

export default Home;
Pada contoh di atas , kita memanggil function di onClick tanpa didekrasikan terlebih dahulu. Ketika button di klik , maka akan memanggil function updater untuk merubah message menjadi hello.

Jalankan pada Browser

Alt text

2. Deklarasikan Function tanpa argument

Kita bisa mendeklarasikan function terlebih dahulu , kemudian kita panggil function tersebut di event onClick.

app/page.ts
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";
import Button from "./component/Button";

const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0

  const increment = () => {
    setCount((c) => c + 1);
  };

  const decrement = () => {
    setCount((c) => c - 1);
  };

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />
      <div>{count}</div>
      <Button
        title="Tambah"
        variant="solid"
        colorSchema="blue"
        onClick={increment}
      />
      <Button
        title="Kurang"
        variant="solid"
        colorSchema="red"
        onClick={decrement}
      />
    </main>
  );
};

export default Home;

Pada contoh di atas, kita deklarasikan dua function yaitu increment dan decrement , kemudian kita panggil di dalam onClick.

Alt text

3. Deklarasikan function dengan argument event type

argument dari function juga bisa merupakan event type yang mana nanti kita bisa mengakes propery dari suatu element HTML seperti nama, value, id dan lain-lain. Berikut contoh bagaimana membuat function dengan argument event type dan cara menggunakannnya pada event.

app/page.ts
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";

import InputText from "../component/InputText";
import { ChangeEvent } from "react";

const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0

  let [payload, setPayload] = useState({
    name: "",
    password: "",
    email: "",
    alamat: "",
  });

  const handleChange = (event: ChangeEvent<any>) => {
    setPayload(() => {
      return {
        ...payload,
        [event.target.name]: event.target.value,
      };
    });
  };
  console.log("pay", payload);
  return (
    <main className="space-y-5 p-10">
      {JSON.stringify(payload)}
      <InputText
        id="name"
        name="name"
        placeholder="name"
        value={payload.name}
        onChange={(event) => {
          console.log("eve", event.target.value);
          setPayload(() => {
            return {
              ...payload,
              name: event.target.value,
            };
          });
        }}
      />
      <InputText
        id="name"
        placeholder="name"
        name="name"
        value={payload.name}
        onChange={handleChange}
      />
      <InputText
        id="password"
        placeholder="password"
        name="password"
        value={payload.password}
        onChange={handleChange}
      />
      <InputText
        id="email"
        placeholder="email"
        name="email"
        value={payload.email}
        onChange={(e: ChangeEvent) => {
          handleChange(e);
        }}
      />
      <InputText
        id="alamat"
        name="alamat"
        placeholder="alamat"
        value={payload.alamat}
        onChange={(e: ChangeEvent) => {
          handleChange(e);
        }}
      />
    </main>
  );
};

export default Home;

Kita bisa langsung memanggil nama function pada onChange dan tidak menuliskan argument nya, seperti pada kode onChange={handleChange}.JSX akan secara otomatis memberikan argument yang diberikan yaitu event type dari suatu element.

Selain itu, kita juga bisa memanggil function seperti inline, namun dalam function itu memanggil function handleChange dan memberikan argument event onChange={(event)=> {handleChange(event)}}.

Jalankan pada Browser

Alt text

4. Deklarasikan function dengan argument

Sebelumnya kita belajar membuat function untuk event jika argumentnya adalah sebuah event type, selain itu kita bisa membuat function yang digunakan dalam event dengan argument bebas. Argument yang diberikan bisa satu maupun lebih dari satu.

Function dengan satu argument

app/page.tsx
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";
import Button from "./component/Button";n

const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0



  const handleSubmit = (id : number) => {
    alert(id)
  }

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />
      <div>{count}</div>
      <Button
        title="10"
        variant="solid"
        colorSchema="blue"
        onClick={()=> {
          handleSubmit(10)
        }}
      />
      <Button
        title="100"
        variant="solid"
        colorSchema="red"
        onClick={()=> {
          handleSubmit(100)
        }}
      />
    </main>
  );
};

export default Home;

Jalankan pada Browser

Alt text

Function dengan lebih dari argument

app/page.tsx
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";
import Button from "./component/Button";

const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0



  const handleSubmit = (id : number, nama : string) => {
    alert(`nama adalah ${nama} dengan id adalah ${id}`)
  }

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />
      <div>{count}</div>
      <Button
        title="10"
        variant="solid"
        colorSchema="blue"
        onClick={()=> {
          handleSubmit(10, "ihsan")
        }}
      />
      <Button
        title="100"
        variant="solid"
        colorSchema="red"
        onClick={()=> {
          handleSubmit(100, "akbar")
        }}
      />
    </main>
  );
};

export default Home;

Jalankan pada Browser

Alt text

5. Function sebagai suatu Props

Pada struktur project reactjs, terkadang ada kebuutuhan yang mengharuskan kita membuat function pada komponen parent dan dikirimkan ke komponen child sebagai sebuah props. Berikut contoh bagaimana mengimplentasikan hal tersebut.

Membuat Komponen Belajar di folder module

app/module/belajar.tsx
import Button from "../component/Button";

interface BelajarProps {
  handleSubmit: (a: number, b: string) => void;
}

const BelajarEvent: React.FC<BelajarProps> = ({ handleSubmit }) => {
  return (
    <section>
      <h1>Belajar Event</h1>
      <Button
        title="testing"
        colorSchema="green"
        onClick={() => {
          handleSubmit(200, "akbar");
        }}
      />
    </section>
  );
};

export default BelajarEvent;

Panggil di app/page.tsx

app/page.tsx
"use client"; // gunakan use client karena ada onChange pda komponen
import { useState } from "react";
import Button from "./component/Button";
import BelajarEvent from "./module/belajar";


const Home = () => {
  let [message, setMessage] = useState("hai"); // jika string, dengan data awal "hai"
  let [count, setCount] = useState(0); // jika number , dengan data awal 0



  const handleSubmit = (id : number, nama : string) => {
    alert(`nama adalah ${nama} dengan id adalah ${id}`)
  }

  return (
    <main className="space-y-5">
      <h1>Hello World</h1>
      <p>message addalah {message}</p>{" "}
      <Button
        title="Hello"
        variant="solid"
        colorSchema="blue"
        onClick={() => {
          setMessage("Hello");
        }}
      />
      <div>{count}</div>
      <Button
        title="10"
        variant="solid"
        colorSchema="blue"
        onClick={()=> {
          handleSubmit(10, "ihsan")
        }}
      />
      <Button
        title="100"
        variant="solid"
        colorSchema="red"
        onClick={()=> {
          handleSubmit(100, "akbar")
        }}
      />

      <BelajarEvent handleSubmit={handleSubmit} />
    </main>
  );
};

export default Home;

Pada kode di atas adalah contoh bagaimana function yang dibuat di komponen parent dikirimkan ke child melalui props. Kemudian pada komponen child kita menggunakan function tersebut dan memanggilnya dalam event

Alt text

Warning

Latihan sangat diperlukan untuk memahami materi ini, buatlah latihan mandiri dan diskusikan dengan guru.