Как получить доступ к неуправляемому компоненту?

Что такое неуправляемые компоненты?

Неуправляемые компоненты в React — это элементы формы, которые хранят своё состояние в DOM, а не в состоянии React. В отличие от управляемых компонентов, где каждое изменение поля синхронизируется с состоянием через onChange, неуправляемые компоненты полагаются на рефы для доступа к текущим значениям.

Как получить доступ?

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

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 ref={inputRef} type="text" />
      <button type="submit">Отправить</button>
    </form>
  );
}

В этом примере inputRef прикрепляется к полю ввода. При отправке формы мы получаем значение через inputRef.current.value.

Когда использовать?

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

Вывод: используйте неуправляемые компоненты и рефы для быстрого доступа к данным формы, когда не нужен полный контроль над каждым изменением.