createRef

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

• Ссылка
  • createRef()
• Использование
  • Объявление ссылки в компонентном классе
• Альтернативы
  • Миграция из класса с createRef в функцию с useRef

Ссылка

createRef()

Вызов createRef для объявления ссылок внутри компонентного класса.

import { createRef, Component } from 'react';

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

См. дополнительные примеры ниже.

Параметры

createRef не принимает параметров.

Возвращаемое значение

createRef возвращает объект с единственным свойством:

• current: Изначально он устанавливается в null. Позже его можно установить на другое значение. Если вы передадите объект ссылки React как атрибут ref узлу JSX, React установит его свойство current.

Примечания

• createRef всегда возвращает другой объект. Это эквивалентно написанию { current: null } самостоятельно.
• В функциональном компоненте, вероятно, нужно использовать useRef вместо этого, который всегда возвращает один и тот же объект.
• const ref = useRef() эквивалентно const [ref, _] = useState(() => createRef(null)).

Использование

Объявление ссылки в компонентном классе

Для объявления ссылки внутри компонентного класса, вызовите createRef и присвойте его результат полю класса:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Если теперь вы передадите ref={this.inputRef} в <input> в вашем JSX, React заполнит this.inputRef.current узлом DOM ввода. Например, вот как создать кнопку, которая фокусирует ввод:

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>
      </>
    );
  }
}

Альтернативы

Миграция из класса с createRef в функцию с useRef

Мы рекомендуем использовать функциональные компоненты вместо компонентных классов в новом коде. Если у вас есть некоторые существующие компонентные классы, использующие createRef, вот как вы можете их преобразовать. Вот исходный код:

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>
      </>
    );
  }
}

При преобразовании этого компонента из класса в функцию, замените вызовы createRef вызовами 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>
    </>
  );
}