Вопрос с собеседования · Frontend

Как сделать простую форму в React?

JuniorReact
Ещё спрашивают так:
  • Как получить значение поля ввода в React?
Коротко

Контролируемое поле: значение в state, value={name} и onChange={e => setName(e.target.value)} — React — источник истины, удобно валидировать и форматировать на лету. Неконтролируемое: значение живёт в DOM, читается при отправке через FormData или ref, defaultValue задаёт начальное. Отправка — onSubmit у <form> с e.preventDefault(). Кнопка внутри формы по умолчанию — submit.

  • checkbox — checked и e.target.checked
  • Подписи — label с htmlFor, ошибки — рядом с полем
  • Большие формы — библиотека (React Hook Form)

А ещё value без onChange делает поле «только для чтения» и вызывает предупреждение

Подробно

function Signup() {
  const [email, setEmail] = useState("");
  return (
    <form onSubmit={e => { e.preventDefault(); register(email); }}>
      <label htmlFor="email">Email</label>
      <input id="email" value={email} onChange={e => setEmail(e.target.value)} />
      <button>Зарегистрироваться</button>
    </form>
  );
}

Что хотят услышать

  • Контролируемые и неконтролируемые поля.
  • onSubmit с preventDefault.
  • Доступные подписи.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Достаточно value без onChange — поле будет редактируемым
  • ✗Формы в React отправляются только через fetch в onClick кнопки
  • ✗preventDefault в onSubmit не нужен — страница не перезагрузится при отправке формы
  • ✓Значение в state (value + onChange) или в DOM через FormData; отправка — onSubmit

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования