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

В React для доступа к неконтролируемому input и его значению используется ref. Неконтролируемый компонент — это такой, у которого значение не хранится в состоянии React, а управляется самим DOM.

Пример:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert(inputRef.current.value); // получаем текущее значение input
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Показать значение</button>
    </>
  );
}

Здесь inputRef.current ссылается на DOM-элемент input, и через свойство .value можно получить текущее значение поля.