Обработка событий: onClick и onChange

Цель: обрабатывать нажатия и изменения текста с помощью синтетических событий React, обеспечивая одинаковое поведение в разных браузерах.

• onClick запускает действия
• onChange считывает значения полей ввода
• Объект события содержит подробности

Подключите обработчик: onClick={handle}. Делайте функции небольшими; обновляйте состояние с помощью функций обновления (предпочитайте функциональную форму, если используете предыдущее значение).

onChange срабатывает, когда пользователь редактирует поле ввода. Считывайте текст из event.target.value и храните состояние как единственный источник истины.

Демонстрация: увеличивайте значение при нажатии, отображайте ввод с помощью onChange и предотвращайте перезагрузку при отправке формы с помощью event.preventDefault().

Синтетические события оборачивают нативные события для единообразия. Считывайте значения внутри обработчика; делайте обработчики короткими и целенаправленными.

• Используйте event.preventDefault() для форм
• Используйте event.target.value для полей ввода

Советы:

• Не изменяйте DOM напрямую; пусть интерфейсом управляет состояние.
• Избегайте сложной встроенной логики в обработчиках — вызывайте небольшие функции.
• Используйте функцию обновления при работе с предыдущим состоянием.

Повторение: используйте onClick для действий и onChange для полей ввода; считывайте значения из event.target.value; при необходимости предотвращайте стандартную перезагрузку формы.