Comments 13
<Input model={state.form.firstName} />
<Input model={state.form.lastName} />
<Select model={state.form.gender}>
<option value="male">Male</option>
<option value="female">Female</option>
</Select>
Или просто берём Formik и забываем о практически всей боли при работе с формами.
Ничего стрёмного там нет, а вот жизнь очень сильно упрощает.
С простыми полями (input, select…) formik берёт большую часть работы на себя из коробки (в большинстве случаев даже не надо обработчики событий развешивать, достаточно name='email' для связи хранилищем значений).
Состояние формы он тоже берёт на себя (сабмитится ли форма или нет в данный момент, например).
Поддержка валидации с помощью yup.js тоже из коробки – составляешь схему, скармливаешь её в Formik, и валидация сразу работает.
Так что Formik прекрасен, если уметь его готовить, а научиться его готовить не так уж сложно.
Я как-то ожидал в 2020 увидеть что-то про валидацию и динамику, а не самописный "предпочтительный" велосипед // Наверное, год все же нужно немного другой указать
Не вижу ничего негативного в термине "велосипед". Думаю для посетителей хабра вполне привычно называть самописные реализации существующего функционала велосипедами. Очень жаль, если это настолько задевает Ваши чувства.
Акцент в комментарии был на том, что главная проблема работы с формами на данный момент — это не то, как сохранить в стейт больше одного поля (эта задача вряд-ли поставит кого-то в тупик), а именно валидация, отправка, зависимости между полями, динамика и т.д. Для решения этих задач существуют комплексные популярные решения (вроде упомянутого пару комментариев назад Formik'а, JSON schema и т.п.). Предложенные в статье реализации подобные задача никак не решают. Также они не являются инновационными, общепринятыми или хотябы имеющими дополнительную полезную нагрузку кроме простого сохранения значений полей формы в состоянии компонента. Метод с неконтролируемой формой и вовсе не самый рекомендуемый (по крайней мере для React). Именно по этой причине я считаю вполне корректным называть данные реализации "велосипедами" и в корне не согласен с окончанием "… в 2020 году" в заголовке статьи. На мой взгляд больше подходит окончание "… для начинающих". Такие дела.
Не вижу ничего негативного в термине «велосипед»
А я вижу, ещё как.
Во первых под этим термином в подавляющем большинстве подаразумевается следующее — «Ты написал то, что уже за тебя кто-то другой написал, и тем более полюбому твоя реализация будет хуже других, вот ты дэбил».
В таком то контексте ничего негативного?
а не самописный «предпочтительный» велосипед
именно валидация, отправка, зависимости между полями, динамика и т.д.
Вот именно эти вещи пишутся самим разработчиком(не прикручивателем, он с этим не справится или справится крайне плохо и не удобно) 1 раз и используются на протяжения всего проекта. В чем проблема то??? Так обломно выделить драгоценный час времени? А думать по логике, если я что-то пишу сам, значит я изобретаю велосипед и это говно, ну что я могу сказать, wordpress, bitrix и т.п. там думать не надо и писать ничего самому не надо, выбирай виджеты, жми на галочки и готово.
Создание React форм в 2020 году