Логирование значений контролируемого и неконтролируемого полей формы в React при отправке

Условие

Необходимо вывести в консоль значения полей формы, реализованных как controlled с помощью useState и как uncontrolled через ref, при событии отправки.

export default () => {
  const handleSubmit() => {
    console.log("First input value: ");
    console.log("second input value: ");
    };
  
  return (
    <form onClick-(handleSubmit)>
    <input placeholder-"controlled field" /> 
    <input placeholder="uncontrolled field" />
    <button>Отправить заявку на кредит</buttons>
    </form>
    )
}

Ответ

Обработчик должен стоять на onSubmit формы: controlled-значение читается из state, uncontrolled — из ref.current.value. PreventDefault отменяет обычную отправку страницы.

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

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