Sign in Subscribe
ReactJs

Mencegah Perilaku Default di Browser dengan preventDefault

Mencegah Perilaku Default di Browser dengan preventDefault
Photo by Igor Miske / Unsplash

Dalam pengembangan web, banyak elemen HTML memiliki perilaku default yang terjadi saat pengguna berinteraksi dengan mereka. Contohnya:

✅ Form yang dikirimkan akan menyebabkan reload halaman.
✅ Klik pada link <a> akan mengarahkan ke URL baru.
✅ Klik kanan pada elemen tertentu bisa membuka menu konteks bawaan browser.

Dalam React (dan JavaScript pada umumnya), kita bisa mencegah perilaku default ini menggunakan metode event.preventDefault(). Artikel ini akan membahas bagaimana cara menggunakan preventDefault untuk menangani event di React dengan efektif!

1. Apa Itu preventDefault?

preventDefault() adalah metode dalam objek event yang digunakan untuk menghentikan perilaku default dari suatu elemen tanpa menghentikan event lainnya.

📌 Contoh kasus yang bisa dicegah dengan preventDefault():

  • Mencegah reload halaman saat form dikirim.
  • Mencegah link <a> mengarah ke URL.
  • Mencegah menu klik kanan bawaan browser.

Sintaks Dasar:

event.preventDefault();

2. Contoh Menggunakan preventDefault dalam Form

Ketika kita memiliki form dalam React, secara default saat tombol submit ditekan, halaman akan melakukan reload. Kita bisa mencegahnya dengan preventDefault().

📌 Contoh Form Tanpa preventDefault (Akan Reload Halaman)

import React from 'react';

function FormTanpaPreventDefault() {
  function handleSubmit(event) {
    alert("Form dikirim!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Masukkan teks" />
      <button type="submit">Kirim</button>
    </form>
  );
}

export default FormTanpaPreventDefault;

Masalah:

  • Saat tombol submit ditekan, alert akan muncul tetapi halaman akan reload, karena form masih menjalankan perilaku default-nya.

📌 Solusi: Tambahkan event.preventDefault()

import React from 'react';

function FormDenganPreventDefault() {
  function handleSubmit(event) {
    event.preventDefault(); // Mencegah reload halaman
    alert("Form berhasil dikirim tanpa reload!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Masukkan teks" />
      <button type="submit">Kirim</button>
    </form>
  );
}

export default FormDenganPreventDefault;

✅ Sekarang form bisa dikirim tanpa menyebabkan reload halaman.

Output:

Saat tombol diklik ➜ Alert: "Form berhasil dikirim tanpa reload!"

Saat kita menggunakan elemen <a> dalam React, secara default akan mengarahkan ke URL baru. Namun, dalam beberapa kasus kita ingin mencegah perilaku ini, misalnya jika navigasi dilakukan melalui React Router atau untuk kebutuhan validasi sebelum berpindah halaman.

📌 Contoh Tanpa preventDefault (Akan Berpindah Halaman)

import React from 'react';

function LinkTanpaPreventDefault() {
  return (
    <a href="https://google.com">Klik Aku</a>
  );
}

export default LinkTanpaPreventDefault;

Masalah:

  • Saat link diklik, halaman akan langsung diarahkan ke Google.

📌 Solusi: Gunakan preventDefault() untuk Mencegah Navigasi

import React from 'react';

function LinkDenganPreventDefault() {
  function handleClick(event) {
    event.preventDefault(); // Mencegah perpindahan halaman
    alert("Navigasi diblokir, tetap di halaman ini!");
  }

  return (
    <a href="https://google.com" onClick={handleClick}>Klik Aku</a>
  );
}

export default LinkDenganPreventDefault;

✅ Sekarang link tidak akan mengarahkan ke halaman baru, tetapi akan menampilkan alert.

Output:

Saat link diklik ➜ Alert: "Navigasi diblokir, tetap di halaman ini!"

4. Mencegah Menu Klik Kanan Menggunakan preventDefault

Jika kita ingin menonaktifkan menu klik kanan di halaman tertentu, kita bisa menggunakan preventDefault() pada event contextmenu.

📌 Contoh Menonaktifkan Klik Kanan

import React from 'react';

function DisableRightClick() {
  function handleContextMenu(event) {
    event.preventDefault();
    alert("Klik kanan dinonaktifkan!");
  }

  return (
    <div onContextMenu={handleContextMenu} style={{ padding: 50, background: '#f0f0f0' }}>
      Klik kanan di sini tidak akan berfungsi.
    </div>
  );
}

export default DisableRightClick;

✅ Sekarang klik kanan tidak akan menampilkan menu default browser, tetapi akan menampilkan alert.

Output:

Saat klik kanan ➜ Alert: "Klik kanan dinonaktifkan!"

5. Best Practices Menggunakan preventDefault

✅ Gunakan preventDefault() hanya saat diperlukan.
✅ Pastikan event handler ditulis dengan cara yang optimal.
✅ Gunakan preventDefault() untuk mengontrol navigasi dan form submission di aplikasi React.
✅ Hindari penggunaan preventDefault() jika masih ingin mempertahankan perilaku default pada elemen tertentu.

6. Kesimpulan

  • preventDefault() digunakan untuk mencegah perilaku default elemen HTML dalam browser.
  • Bisa digunakan untuk menghentikan reload halaman pada form submission, mencegah navigasi link, atau menonaktifkan menu klik kanan.
  • Cara penggunaannya sederhana: cukup panggil event.preventDefault() dalam event handler.
  • Penting untuk digunakan dengan bijak agar tidak mengganggu user experience dalam aplikasi.

Dengan memahami cara menggunakan preventDefault(), kita bisa membuat aplikasi React yang lebih interaktif dan terkontrol!

Read next