Tuzak

createRef çoğunlukla sınıf bileşenleri. için kullanılır. Fonksiyon bileşenleri genellikle bunun yerine useRef kullanır.

createRef rastgele değer içerebilen bir ref nesnesi oluşturur.

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

Başvuru Dokümanı

createRef()

Bir sınıf bileşeni içinde bir ref bildirmek için createRef çağrısı yapın

import { createRef, Component } from 'react';

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

Aşağıda daha fazla örneğe bakın.

Parametreler

createRef hiçbir parametre almaz.

Returns

createRef tek bir özelliğe sahip bir nesne döndürür:

  • current: Başlangıçta null olarak ayarlanır. Daha sonra başka bir şeye ayarlayabilirsiniz. Ref nesnesini React’e bir JSX düğümüne ref niteliği olarak iletirseniz, React onun current özelliğini ayarlayacaktır.

Uyarılar

  • createRef her zaman farklı bir nesne döndürür. Bu, { current: null } yazmaya eşdeğerdir.
  • Bir fonksiyon bileşeninde, muhtemelen bunun yerine her zaman aynı nesneyi döndüren useRef istersiniz.
  • const ref = useRef() ifadesi const [ref, _] = useState(() => createRef(null)) ifadesine eşdeğerdir.

Kullanım

Bir sınıf bileşeninde ref bildirme

Bir class component, içinde bir ref bildirmek için createRef çağrısı yapın ve sonucunu bir sınıf alanına atayın:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Şimdi JSX’inizdeki bir <input> öğesine ref={this.inputRef} iletirseniz, React this.inputRef.current öğesini girdi DOM node’u ile dolduracaktır. Örneğin, girişi odaklayan bir node’u şu şekilde yapabilirsiniz:

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}>
          Input'a odaklan
        </button>
      </>
    );
  }
}

Tuzak

createRef çoğunlukla sınıf bileşenleri. için kullanılır. Fonksiyon bileşenleri genellikle bunun yerine useRef kullanır.

Alternatifler

createRef ile bir sınıftan useRef ile bir fonksiyona geçiş

Yeni kodda sınıf bileşenleri yerine fonksiyon bileşenlerinin kullanılmasını öneriyoruz. Eğer createRef kullanan bazı mevcut sınıf bileşenleriniz varsa, bunları nasıl dönüştürebileceğiniz aşağıda açıklanmıştır. Bu orijinal koddur:

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}>
          Input'a odaklan
        </button>
      </>
    );
  }
}

Bu bileşeni bir sınıftan bir fonksiyona dönüştürdüğünüzde, createRef çağrılarını useRef: çağrılarıyla değiştirin

import { useRef } from 'react';

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

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Input'a odaklan
      </button>
    </>
  );
}
ÖncekicreateElement
SonrakiforwardRef