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

Условие

Необходимо реализовать два типа полей ввода в React: контролируемый и неконтролируемый. При нажатии на форму в консоль должны выводиться значения этих полей.

import React from "react";

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

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

Ответ

Для первого input используйте value/onChange и state, для второго — defaultValue и ref. При клике читайте первое значение из state, второе из ref.current.value.

export default function App() {
  const [value, setValue] = React.useState('');
  const uncontrolled = React.useRef(null);
  const logValues = () => {
    console.log('controlled input value:', value);
    console.log('uncontrolled input value:', uncontrolled.current?.value);
  };
  return <form onClick={logValues} onSubmit={event => event.preventDefault()}>
    <input aria-label="Контролируемое поле" value={value} onChange={event => setValue(event.target.value)} />
    <input aria-label="Неконтролируемое поле" ref={uncontrolled} defaultValue="" />
    <button type="button">Показать значения</button>
  </form>;
}

React импортирован как в условии. onClick формы срабатывает и на кликах по дочерним элементам. Для реальной отправки формы лучше использовать onSubmit и кнопку submit; здесь сохранено требование логировать именно клик, без отправки данных наружу.