Next.js, Enter/blur submit и Escape cancel в inline-формах

В inline-формах на Next.js кроме submit важен и ритм взаимодействия вокруг него. Если пользователь переименовывает сущность прямо в дереве, обычно ожидается простое поведение. Enter сохраняет, blur тоже сохраняет, Escape отменяет редактирование. Как только этого нет, даже короткая форма начинает ощущаться тяжелее, чем должна.

Поэтому inline CRUD полезно собирать не как уменьшенную обычную форму, а как отдельный сценарий с понятными правилами. Enter завершает действие, blur не теряет изменения при уходе фокуса, Escape возвращает интерфейс в спокойное состояние. В таком режиме форма ведёт себя естественно и не требует от пользователя лишних движений.

В связке с Server Actions и useActionState это удобно. UI не тратит силы на ручной транспортный слой и может сосредоточиться на самом поведении поля. За счёт этого простое редактирование остаётся простым и по коду.

Статья на Хабр Проект: Workbench Stepik: Next.js II: TypeScript 2026

#nextjs #typescript #serveractions #useactionstate #approuter #react #forms #вебразработка

Next.js, Enter/blur submit и Escape cancel в inline-формах | Сетка — социальная сеть от hh.ru