Модуль 14 · Урок 54
Events, controlled forms і accessible interaction
Event handler запускається через interaction, а не під час render. Controlled form узгоджує value/checked зі state, зберігаючи native semantics, keyboard і visible feedback.
Передайте function, не call
<button onClick={handleSave}>Зберегти</button> <form onSubmit={handleSubmit}>…</form>onClick={handleSave()} викликає side effect під час render. Propagation і default action — різні механізми: stopPropagation() не скасовує submit/navigation, а preventDefault() не зупиняє bubbling.
Controlled accessible form
Text input отримує string value, checkbox — Boolean checked, кожний має onChange. Не перемикайте control між undefined/uncontrolled і controlled. Використовуйте visible label, semantic form, button type="submit", а secondary buttons — type="button".
Практика
Пройдіть events/forms/keyboard matrix у lab: input, checkbox, Enter submit, reset, retry, status/error announcement та focus visibility.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.