Как получить доступ к значению неконтролируемого input в React?

Неконтролируемые компоненты в React

В React компоненты могут быть контролируемыми или неконтролируемыми. Неконтролируемые компоненты хранят своё состояние в DOM, а не в React-состоянии. Это полезно, когда вам не нужно отслеживать каждое изменение ввода, а требуется получить значение только в определённый момент, например, при отправке формы.

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

Для доступа к DOM-элементу неконтролируемого input используется хук useRef. Он создаёт объект ref, который можно привязать к элементу через атрибут ref. После этого значение input доступно через ref.current.value.

Пример кода

import React, { useRef } from 'react';

function MyForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Значение: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} defaultValue="" />
      <button type="submit">Отправить</button>
    </form>
  );
}

В этом примере input не контролируется React — его значение управляется браузером. При отправке формы мы получаем значение через ref.

Когда применять

Неконтролируемые компоненты с ref удобны для простых форм, интеграции с не-React кодом или когда не требуется валидация в реальном времени. Однако для сложных форм с динамической валидацией лучше использовать контролируемые компоненты.