Pitfall

createRef kebanyakan digunakan untuk komponen kelas. Sedangkan komponen fungsi biasanya mengandalkan useRef.

createRef membuat sebuah objek ref yang menyimpan nilai apapun.

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

Referensi

createRef()

Panggil createRef untuk mendeklarasikan sebuah ref di dalam sebuah komponen kelas.

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

Lihat contoh lebih banyak di bawah.

Parameter

createRef tidak memerlukan parameter.

Kembalian

createRef mengembalikan sebuah objek dengan properti tunggal:

  • current: Awalnya, bernilai null. Anda dapat menggantinya dengan nilai lain kemudian. Jika Anda mengoper objek ref ke React sebagai sebuah atribut ref di dalam simpul JSX, React akan menetapkannya sebagai properti current.

Caveats

  • createRef selalu mengembalikan objek yang berbeda. Sama halnya dengan menulis { current: null } manual.
  • Dalam komponen fungsi, Anda mungkin menginginkan useRef yang selalu mengembalikan obyek yang sama.
  • const ref = useRef() sama dengan const [ref, _] = useState(() => createRef(null)).

Penggunaan

Mendeklarasikan sebuah ref di dalam komponen kelas

Untuk mendeklarasikan ref di dalam sebuah komponen kelas, panggil createRef dan tetapkan hasilnya ke anggota (field) kelas:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Jika Anda mengoper ref={this.inputRef} ke sebuah <input> di dalam JSX Anda, React akan menempatkan input simpul DOM ke this.inputRef.current. Ini Contohnya bagaimana Anda membuat tombol yang memfokuskan ke input:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

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

Pitfall

createRef kebanyakan digunakan untuk komponen kelas. sedangkan komponen fungsi biasanya mengandalkan useRef.

Alternatif

Migrasi dari kelas dengan createRef ke fungsi dengan useRef

Kami merekomendasikan untuk menggunakan komponen fungsi dari pada komponen kelas pada kode baru. Jika Anda memiliki komponen kelas yang menggunakan createRef, ini cara bagaimana mengubahnya. Ini merupakan kode awal:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

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

Saat Anda mengubah komponen ini dari kelas ke fungsi, ganti pemanggilan createRef dengan useRef:

import { useRef } from 'react';

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

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

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

How do you like these docs?