Контролируемый элемент ввода

Условие

Необходимо реализовать контролируемый input‑элемент и получить значение из неконтролируемого.

<div className="App">
    <input placeholder="Управляемый" />
    <input placeholder="НЕуправляемый" />
    <button>Get value</button>
</div>

Ответ

Управляемый input связывается с useState через value/onChange. Неконтролируемый хранит значение в DOM; прочитайте его через ref при клике.

import { useRef, useState } from 'react';
function App() {
  const [value, setValue] = useState('');
  const uncontrolled = useRef(null);
  const [result, setResult] = useState('');
  return <div className="App">
    <label>Управляемый <input value={value} onChange={e => setValue(e.target.value)} /></label>
    <label>Неуправляемый <input ref={uncontrolled} defaultValue="" /></label>
    <button type="button" onClick={() => setResult(uncontrolled.current.value)}>Get value</button>
    <output>{result}</output>
  </div>;
}

Не переключайте один input между undefined и строковым value: режим должен оставаться последовательным. Для неуправляемого поля начальное значение задают defaultValue, не value без обработчика.