0Pricing
React Academy · Pelajaran

Menentukan Tipe Event & Ref dalam TypeScript

Gunakan generik React.ChangeEvent, React.MouseEvent, dan RefObject untuk interaksi DOM.

Menentukan Tipe Event & Ref dalam TypeScript adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Peristiwa Sintetis React

React membungkus peristiwa DOM bawaan dalam SyntheticEvent. Setiap jenis peristiwa memiliki generik khusus: React.ChangeEvent<HTMLInputElement>, React.MouseEvent<HTMLButtonElement>, dan sebagainya.

Mengetik onChange

Peristiwa yang paling umum adalah onChange pada elemen masukan. Tentukan tipe penangannya dengan React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

Mengetik onClick

Klik tombol menggunakan React.MouseEvent<HTMLButtonElement>. Akses e.currentTarget, e.preventDefault(), dan e.stopPropagation() dengan pengetikan lengkap.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

Mengetik onSubmit

Pengiriman formulir menggunakan React.FormEvent<HTMLFormElement>. Selalu panggil e.preventDefault() untuk menghentikan navigasi bawaan peramban.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Mengetik Peristiwa Papan Ketik

Gunakan React.KeyboardEvent<HTMLElement> untuk menentukan tipe penangan peristiwa papan ketik. Akses e.key, e.code, dan e.ctrlKey dengan aman.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef untuk Elemen DOM

Teruskan tipe elemen HTML sebagai generik ke useRef dan inisialisasi dengan null. TypeScript kemudian mengetahui bahwa referensi tersebut menampung tipe elemen itu.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Referensi yang Dapat Diubah vs Referensi DOM

Saat menyimpan nilai yang dapat diubah (bukan simpul DOM), inisialisasi useRef dengan sebuah nilai, bukan null. TypeScript menyimpulkan referensi yang dapat diubah sebagai MutableRefObject.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

Mengetik useImperativeHandle

Saat mengekspos API referensi dari komponen anak, definisikan antarmuka untuk pegangan tersebut dan gunakan antarmuka itu dalam forwardRef serta useImperativeHandle.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Panggilan Balik Referensi

Panggilan balik referensi menerima elemen DOM atau null. Tentukan tipenya sebagai (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Target Peristiwa vs Target Saat Ini

e.target adalah elemen yang memicu peristiwa; e.currentTarget adalah elemen tempat penangan dipasang. Konversikan e.target ketika Anda memerlukan properti tertentu.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Tipe Penangan Peristiwa Generik

Untuk menulis fungsi penangan peristiwa yang dapat digunakan kembali, gunakan generik React.EventHandler<Event> atau tuliskan tanda tangan fungsi lengkap langsung di tempat.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Pemeriksaan Cepat

Tipe TypeScript apa yang sebaiknya digunakan untuk useRef yang menampung HTMLInputElement?

Ringkasan

Tentukan tipe penangan peristiwa dengan generik React.ChangeEvent, React.MouseEvent, dan React.FormEvent. Tentukan tipe referensi DOM dengan useRef<HTMLElement>(null) dan referensi yang dapat diubah dengan tipe nilainya. Gunakan forwardRef dengan antarmuka pegangan eksplisit untuk API imperatif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menentukan Tipe Event & Ref dalam TypeScript” gratis?

Ya — teks lengkap “Menentukan Tipe Event & Ref dalam TypeScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menentukan Tipe Event & Ref dalam TypeScript”?

Gunakan generik React.ChangeEvent, React.MouseEvent, dan RefObject untuk interaksi DOM. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menentukan Tipe Event & Ref dalam TypeScript” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menentukan Tipe Props & Nilai Kembalian Komponen
  2. Menentukan Tipe Event & Ref dalam TypeScript
  3. Komponen Generik & Tipe Utilitas
  4. Menentukan Tipe Context & Hook Kustom
← Kembali ke React Academy