Условие
В React события назначают прямо в JSX: onClick, onChange - в формате camelCase. Обработчик получает объект события; из поля ввода значение берут через event.target.value. В App.js создайте классовый компонент с полем заметки и счётчиком нажатий. Методы-обработчики объявите стрелочными функциями (class fields), чтобы не терять контекст this. Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- Создайте классовый App с пустой заметкой и нулевым счётчиком нажатий.
- Свяжите поле ввода с состоянием: при наборе текст на экране обновляется.
- По кнопке «Зафиксировать» увеличьте счётчик и покажите сообщение с текстом заметки.
- Сверьте панель с вкладкой «Результат».
Подсказка для новичка
Пишите код под комментарием // >>> Пишите код здесь <<<. В JSX события пишут camelCase; отдельный addEventListener не нужен. Стрелочные методы класса сохраняют this. Список событий - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Заметка, кнопка и счётчик
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
class App extends React.Component/Component- классовый компонент.this.state-draftTextиtapCount.this.setState- обновление после ввода или клика.onChange+event.target.value- ввод заметки.onClick={() => this.handleTap('Сохранено!')}- клик с аргументом.alert(...)- показать текст заметки и сообщение.placeholder,aria-label,value- атрибуты input..feedback-panelи модификаторы - CSS превью.
Пишите код только в
App.js.
Ниже - важные понятия по теме задачи.
Стили превью (CSS)
-
html, body-margin: 0,min-height: 100%,background: #ecfdf5. -
body-font-family,padding: 16px,box-sizing: border-box. -
#root-max-width: 380px,margin: 0 auto. -
.feedback-panel- центрирование; уh1- цвет#065f46. -
.feedback-panel input- ширина, padding, border, border-radius. -
.feedback-panel__action- зелёная кнопка «Зафиксировать». -
.feedback-panel__draft,.feedback-panel__taps- строки статуса.
Оболочка превью (HTML, не редактируется)
<!DOCTYPE html>,<html lang="ru">,<meta charset="UTF-8" />,<div id="root">.- Монтирование классового
Appчерез ReactDOM.
onChange и event.target.value
В React для текстового поля чаще используют onChange.
Обработчик получает объект события: event.target.value - текущий текст в input.
onClick и аргументы
Запись onClick={this.handleTap} передаст только событие.
Для своего аргумента: onClick={() => this.handleTap('Сохранено!')}.
Счётчик: this.setState((prev) => ({ tapCount: prev.tapCount + 1 })).
Коротко: constructor + state → onChange/onClick → стрелочные методы → alert с аргументом → «Проверить».