Получение значений из контролируемого и неконтролируемого полей ввода

Условие

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

import React from "react";

export default function App() {
    const handleSubmit = () => {
        console.log("controlled input value: ");
        console.log("uncontrolled input value: ");
    };

    return (
        <form onClick={handleSubmit}>x
            <input
                placeholder="controlled field"
            />
            <input placeholder="uncontrolled field" />
            <button>Отправить заявку на кредит</button>
        </form>
    );
}

Ответ

Используйте onSubmit вместо onClick формы, state для controlled-input и ref для uncontrolled-input. При отправке отмените стандартный переход страницы.

export default function App() {
  const [value, setValue] = React.useState('');
  const input = React.useRef(null);
  function handleSubmit(event) {
    event.preventDefault();
    console.log('controlled input value:', value);
    console.log('uncontrolled input value:', input.current.value);
  }
  return <form onSubmit={handleSubmit}>
    <label>Controlled <input value={value} onChange={e => setValue(e.target.value)} /></label>
    <label>Uncontrolled <input ref={input} defaultValue='' /></label>
    <button>Отправить заявку на кредит</button>
  </form>;
}

Так чтение срабатывает и при отправке клавишей Enter, а не при каждом клике внутри формы. Логирование реальных персональных данных в production не требуется.