Memanipulasi DOM dengan Refs

Mendapatkan sebuah ref untuk simpul

Untuk mengakses sebuah simpul DOM yang diatur React, pertama, impor Hook useRef:

import { useRef } from 'react';

Kemudian, deklarasikan ref di dalam komponen Anda:

const myRef = useRef(null);

Terakhir, oper ref Anda sebagai atribut ref ke tag JSX yang Anda ingin dapatkan simpul DOM-nya:

<div ref={myRef}>

Hook useRef mengembalikan objek dengan properti tunggal bernama current. Awalnya, myRef.current akan bernilai null. Saat React membuat simpul DOM untuk <div>, React akan mereferensikan simpul ini ke dalam myRef.current. Anda bisa mengakses simpul DOM ini dari event handlers Anda dan menggunakan API peramban bawaan.

// Anda dapat menggunakan API peramban apa saja, sebagai contoh:
myRef.current.scrollIntoView();

Contoh: Fokus ke sebuah input teks

Pada contoh ini, meng-klik tombol tersebut akan fokus ke input:

Penerapannya:

1. Deklarasikan inputRef dengan useRef Hook.
2. Oper sebagai <input ref={inputRef}>. React akan meletakkan <input> simpul DOM ke dalam inputRef.current.
3. Pada fungsi handleClick, baca input simpul DOM dari inputRef.current dan panggil focus() menggunakan inputRef.current.focus().
4. Oper handleClick event handler ke <button> menggunakan onClick.

Mesikpun manipulasi DOM merupakan hal yang sangat umum untuk ref, Hook useRef dapat digunakan untuk menyimpan hal-hal lain di luar React, seperti ID timer. Sama halnya dengan state, ref tetap sama di antara proses render. Ref sama seperti variabel state yang tidak memicu banyak render saat Anda mengaturnya. Baca tentang ref pada Mereferensikan nilai dengan Ref.

Contoh: Menggulir ke sebuah Elemen

Anda dapat memiliki lebih dari satu ref dalam sebuah komponen. Pada contoh, terdapat carousel terdiri dari 3 gambar. Setiap tombol mengarahkan ke pusat gambar dengan memanggil metode peramban scrollIntoView() pada simpul DOM terkait:

<ul>
  {items.map((item) => {
    // Tidak akan berfungsi
    const ref = useRef(null);
    return <li ref={ref} />;
  })}
</ul>

import { useRef, useState } from "react";

export default function CatFriends() {
  const itemsRef = useRef(null);
  const [catList, setCatList] = useState(setupCatList);

  function scrollToCat(cat) {
    const map = getMap();
    const node = map.get(cat);
    node.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });
  }

  function getMap() {
    if (!itemsRef.current) {
      // menginisialisasi Map pada pertama kali penggunaan.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToCat(catList[0])}>Tom</button>
        <button onClick={() => scrollToCat(catList[5])}>Maru</button>
        <button onClick={() => scrollToCat(catList[9])}>Jellylorum</button>
      </nav>
      <div>
        <ul>
          {catList.map((cat) => (
            <li
              key={cat}
              ref={(node) => {
                const map = getMap();
                if (node) {
                  map.set(cat, node);
                } else {
                  map.delete(cat);
                }
              }}
            >
              <img src={cat} />
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

function setupCatList() {
  const catList = [];
  for (let i = 0; i < 10; i++) {
    catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
  }

  return catList;
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    if (node) {
      // Add to the Map
      map.set(cat, node);
    } else {
      // Remove from the Map
      map.delete(cat);
    }
  }}
>

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    // Add to the Map
    map.set(cat, node);

    return () => {
      // Remove from the Map
      map.delete(cat);
    };
  }}
>

Mengakses simpul DOM komponen lain

Saat Anda memasang ref pada komponen bawaan yang mana hasilnya adalah elemen peramban seperti <input />, React akan mengatur properti current ref pada simpul DOM tersebut (seperti aktual <input /> pada peramban).

Namun, jika Anda mencoba mengatur ref pada komponen Anda sendiri, seperti <MyInput />, secara default Anda akan mendapatkan null. Ini contohnya. Perhatikan bagaimana meng-klik tombol tidak membuat fokus pada input:

Untuk membantu Anda menanggapi issue tersebut, React juga mencetak error pada console:

Ini terjadi karena secara default React tidak mengizinkan komponen mengakses simpul DOM dari komponen lain. Bahkan children dari komponen tersebut! ini ada alasannya. Ref merupakan jalan darurat yang seharusnya jarang digunakan. Memanipulasi simpul DOM komponen lain secara manual membuat kode Anda lebih rentan.

Sebaliknya, komponen yang ingin mengekspos simpul DOM harus memilih perilaku tersebut. Sebuah komponen dapat menentukan untuk meneruskan ref ke salah satu childrennya. Contoh bagaimana MyInput dapat menggunakan API forwardRef:

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

Ini cara kerjanya:

1. <MyInput ref={inputRef} /> memberitahu React untuk meletakkan simpul DOM yang sesuai ke dalam inputRef.current. Namun, itu terserah komponen MyInput untuk mengikutinya—secara default, tidak.
2. Komponen MyInput menggunakan forwardRef. Dengan ini komponen menerima inputRef dari atas sebagai argumen ref kedua yang dideklarasikan setelah props.
3. MyInput itu sendiri mengoper ref yang diterima ke dalam <input>.

Sekarang meng-klik tombol untuk fokus ke input berfungsi:

Dalam sistem desain, merupakan pola umum untuk komponen level rendah seperti tombol, input dan sejenisnya untuk meneruskan ref ke simpul DOM. Sebaliknya, komponen level atas seperti form, list atau bagian dari halaman biasanya tidak mengekspos simpul DOM untuk menghindari dependensi yang tidak disengaja pada struktur DOM.

import {
  forwardRef, 
  useRef, 
  useImperativeHandle
} from 'react';

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Only expose focus and nothing else
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

Ketika React menyematkan Ref

Dalam React, setiap pembaruan dibagi menjadi dua fase:

• Selama proses render, React memanggil komponen Anda untuk mencari tahu apa yang seharusnya berada di layar.
• Selama proses commit, React menerapkan perubahan pada DOM.

Secara umum, Anda tidak ingin mengakses ref selama proses rendering. Keadaan dimana ref menyimpan simpul DOM. Selama proses render pertama, simpul DOM belum dibuat, jadi ref.current bernilai null. Dan selama proses pembaharuan render, simpul DOM belum diperbarui. Jadi terlalu awal untuk membacanya.

React mengatur nilai ref.current selama commit. Sebelum memperbarui DOM, React mengatur nilai ref.current yang terpengaruh menjadi null. Setelah memperbarui DOM, React segera mengatur nilai ref.current tersebut menjadi simpul DOM yang sesuai.

Biasanya, Anda akan mengakses ref dari event handler. Jika Anda ingin melakukan sesuatu dengan sebuah ref, tetapi tidak ada event tertentu untuk melakukannya, Anda mungkin memerlukan Effect. Kami akan membahas effect pada halaman berikutnya.

import { useState, useRef } from 'react';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);      
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

Praktik terbaik memanipulasi DOM dengan refs.

Ref adalah jalan keluar. Anda harus hanya menggunakannya ketika Anda harus “keluar dari React”. Contoh umum dari hal ini termasuk mengelola fokus, posisi scroll, atau memanggil API peramban yang tidak diekspos React.

Jika Anda tetap menggunakan tindakan yang tidak merusak seperti fokus dan scrolling, Anda tidak akan mengalami masalah. Namun, jika Anda mencoba untuk memodifikasi DOM secara manual, Anda dapat berisiko konflik dengan perubahan yang dilakukan React.

Untuk mengilustrasikan masalah ini, contoh ini mencakup pesan selamat datang dan dua tombol. Tombol pertama menampilkan/menyembunyikan menggunakan conditional rendering dan state, seperti yang biasanya dilakukan di React. Tombol kedua menggunakan remove() API DOM untuk menghapusnya secara paksa dari DOM di luar kendali React.

Coba tekan “Toggle with setState” beberapa kali. Pesan seharusnya menghilang dan muncul lagi. Kemudian tekan “Remove from the DOM”. Ini akan menghapusnya secara paksa. Kemudian, tekan “Toggle with setState”:

Setelah Anda menghapus elemen DOM secara manual, mencoba menggunakan setState untuk menampilkannya lagi akan menyebabkan masalah. Hal ini terjadi karena Anda telah mengubah DOM, dan React tidak tahu bagaimana melanjutkan mengelolanya dengan benar.

Hindari mengubah simpul DOM yang dikelola oleh React. Memodifikasi, menambahkan children, atau menghapus children dari elemen yang dikelola oleh React dapat menyebabkan hasil visual yang tidak konsisten atau masalah seperti di atas.

Namun, ini tidak berarti bahwa Anda sama sekali tidak dapat melakukannya. Ini membutuhkan kewaspadaan. Anda dapat dengan aman mengubah bagian dari DOM yang tidak diperbarui oleh React dengan alasan apa pun. Misalnya, jika beberapa <div> selalu kosong di JSX, React tidak akan memiliki alasan untuk menyentuh daftar children. Oleh karena itu, aman untuk menambahkan atau menghapus elemen secara manual di sana.