Условие
Управляемый элемент - это поле, у которого значение задаётся через value={...} из state, а не только в DOM. React становится «источником истины»: ввод → onChange → setState → новый render. В App.js соберите форму регистрации участника с двумя полями и одним общим обработчиком изменений. Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- Создайте классовый App с полями имени и оклада в состоянии.
- Сделайте оба поля управляемыми одним общим обработчиком изменений.
- По «Сохранить» не перезагружайте страницу: проверьте пустые поля, покажите данные и очистите форму.
- Сверьте форму с вкладкой «Результат».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. Без связи value со state поле «живёт» только в DOM. При отправке формы отмените стандартное поведение браузера. API - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Форма: имя и оклад
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
- Управляемый input - значение из state через
value. onChange+setState- цикл «ввод → состояние → render».name+{ [name]: value }- один обработчик на два поля.<form>,onSubmit,preventDefault- отправка без перезагрузки.htmlFor,id,label- связь подписи и поля.type="text",type="number",type="submit".placeholder,aria-label,alert,trim()..team-register-form- CSS превью формы.
Пишите код только в
App.js.
Ниже - важные понятия по теме задачи.
Стили превью (CSS)
-
html, body-margin: 0,min-height: 100%,background: #eff6ff. -
body-font-family,padding: 16px,box-sizing: border-box. -
#root-max-width: 420px,margin: 0 auto. -
.team-register-form- padding, border, border-radius, белый фон. -
.team-register-form h2- заголовок формы. -
.team-register-form__field- блок label + input; у label -display: block, у input - ширина 100%. -
.team-register-form__submit- синяя кнопка «Сохранить».
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>,<html lang="ru">,<meta charset="UTF-8" />,<div id="root">.- Монтирование классового
App.
Controlled vs uncontrolled
Если у input есть value={fullName}, React контролирует содержимое.
Без связи со state значение хранится только в DOM - такой input называют неуправляемым.
Исключение: type="file" - его нельзя сделать управляемым через value.
Один handleFieldChange на два поля
Атрибут name совпадает с ключом state.
В setState: this.setState({ [name]: value }) - квадратные скобки задают имя свойства динамически.
Коротко: state → value → onChange → [name]: value → onSubmit + preventDefault → «Проверить».