Работа с формой
В данном уроке мы превратим наш input в форму добавления новости. Научимся работать с чекбоксами, disabled атрибутом кнопки и прочими стандартными для такой задачи вещами.
Результатом добавления новости, пока что, вновь, будет alert с текстом новости.
Переименуйте <TestInput />
в <Add />
, и рендерите в нем следующую форму: автор (input), текст новости (textarea), "я согласен с правилами" (checkbox), "показать alert" (button).
Попутно изменим названия классов, удалим автофокус, удалим лишние обработчики и переместим компонент <Add />
перед заголовком "Новости".
Итого, заготовка для "добавления новости" будет выглядеть следующим образом:
Если вы не против моего оформления, можете взять стили для компонента <Add />
:
Так как мы близки к финалу, я бы хотел нагрузить вас работой.
Задача: сейчас инпут "ваше имя" и text area - просто "болванка". Нужно сделать их контролируемыми.
Подсказка:
создайте state (начальное состояние)
добавьте обработчики на изменение имени и текста новости
в value элементов записывайте значение переменной из состояния
Решение: (код сейчас не идеальный, но понятный. Рефакторить будем в конце раздела)
Инпуты начали работать и у нас есть очень приятный бонус: имя и текст новости хранится в this.state. Удобно? Разумеется. Представьте, что мы будем делать валидацию формы. У нас в любой момент времени будут актуальные значения имени и текста новости! Все еще не в восторге? Немного терпения и мы доберемся до валидации...
Однако, для начала заставим работать связку чекбокс + кнопка отправки новости.
Давайте отключим кнопку "показать alert", если не отмечен чекбокс. Здесь есть 2 варианта - использовать state или не использовать. Для нашей задачи никаких проблем с производительностью не будет, если мы будем использовать state. Лазить в DOM (даже с помощью refs) в React-приложениях - не лучший вариант.
Разобьем задачу на этапы, необходимо:
добавить значение в state для чекбокса (true/false);
добавить атрибут disabled у кнопки равным значению из state;
добавить функцию обработчик;
Попробуйте сами, либо посмотрите решение:
Так как по клику в чекбокс происходит изменение state, то вызывается перерисовка (метод render отработает). Значит, у нас всегда будет актуальное значение agree
в disabled
атрибуте.
Мне нечего более здесь комментировать для тех, кто знает основы JavaScript. Для тех, кто не знает:
checked (Кантор);
disabled = true
будет означать, что кнопка выключена. Кнопка должна быть выключена тогда, когдаagree = false
(то есть, чекбокс не отмечен), значит мы делаем отрицание (НЕ) с помощью знака восклицания;
Для добавления новости нам осталось сформировать код, который будет выводить в alert имя и текст новости. Я думаю, эта задача вам точно под силу.
Решение:
Блокировка кнопки, если не все поля заполнены
Приехала обещанная валидация. Точнее, "Валидация часть 1: Начало".
Почему часть 1? Потому что, валидация форм и вообще работа с формой - одна из самых скрупулезных задач. Нужно показывать понятные сообщения об ошибках, подсвечивать неправильно заполненное поле, блокировать кнопку отправки, валидировать поля по определенным правилам и так далее.
В данный момент, мы добавим к условию (что чекбокс отмечен) только одно простое условие: поля name и text должны быть заполнены. И не пробелами.
Как бы решалась такая задача без react? Вероятно у нас была бы функция validate, которая вызывалась бы на каждое изменение в проверяемых полях. Нужно было бы генерировать и прослушивать событие...
Думаю, вы поняли намек. Здесь без state не обойтись, и это точно то место, где удобнее использовать именно состояние, а не refs.
Попробуйте сами, а потом сверьтесь с решением.
Задача: если в поле "имя" или "текст" не введено ничего (либо пробелы) - кнопка "показать alert" должна быть недоступной.
Подсказка #1: для удаления пробелов используйте стандартный метод trim()
Подсказка #2: вам потребуется в атрибут disabled передавать результат работы функции validate (которую нужно создать в качестве метода компонента, чтобы был доступ к this.state). Пример:
Решение:
Ну как? Не очень весело? Если да - значит у вас проблемы с основами JavaScript и вам нужно их подтягивать. А если в целом порядочек - я вас поздравляю, мы почти у цели.
Порефакторим копипасту
Есть проблемка:
Очень похожие методы. Можно ли их унифицировать? Конечно.
необходимо добавить вычисляемое значение ключа;
понять откуда будем считывать ключ;
Ключ будем считывать из id элемента. Идея такова: в id записываем такую же строку, что и значение ключа в state, то есть для name - инпуту дадим id='name'
, а для textarea - id='text'
Готовы?
Из e.currentTarget
мы можем считать id
и value
. Далее записываем в стейт по нужному ключу - значение.
Вычисляемое значение ключа - это одна из самых больных тем новичков. Внимательно читаем (и перечитываем) урок из учебника Кантора: Объекты как ассоциативные массивы
Итого: мы научились работать с формой. Положили начало досерверной валидации. Поняли и осознали, что знание основ JavaScript - это невероятный "буст" в изучении React. Да, без основ можно читать туториалы и выполнять задачи, но поверьте, если вы сначала подтянете основы, то React станет вам другом гораздо быстрее.
Исходный код на данный момент.
Last updated