Содержание
- 3. Стейты представляют собой реактивные переменные компонентов. Реактивность означает, что при изменении стейта изменения произойдут во всех
- 4. Для краткости обычно не используют промежуточную константу для массива, а используют деструктуризацию: Выведем наш стейт с
- 5. Сделаем кнопку, по нажатию на которую будет изменяться стейт: В обработчике клика используем функцию setName, чтобы
- 6. В одном компоненте можно использовать несколько стейтов. Сделаем один стейт для названия продукта, а второй -
- 7. Логическое значение в стейте Давайте сделаем стейт inCart, который будет показывать, в корзине продукт или нет:
- 8. Счетчик Очень часто используется счетчик кликов по кнопке. Его можно реализовать следующим образом: Можно избавится от
- 9. Практические задачи Создать компонент для отображения на экране данные юзера: его имя, фамилию, возраст. Сделайте для
- 10. input в React Работа с инпутами в React происходит с помощью стейтов. Каждому инпуту назначается свой
- 11. В этом обработчике нужно прочитать текущий текст input и установить его в стейт с помощью функции
- 12. Пусть мы будем вводить в input число. Сделаем так, чтобы по мере ввода числа в input
- 13. Пусть у нас есть два input-а, в которые будут вводится числа. Давайте сделаем так, чтобы по
- 14. Практические задачи Сделайте два input-а. Пусть текст первого инпута выводится в первый абзац, а текст второго
- 15. Обработка данных формы по нажатию на кнопку Представим, что нам нужно сделать некоторую "тяжелую", ресурсоемкую операцию.
- 16. Практические задачи Даны два инпута, две кнопки и абзац. Пусть в инпуты вводятся числа. По нажатию
- 17. Работа с textarea В React для удобства работа с textarea сделана похожа на работу с текстовым
- 18. Работа с чекбоксами Работа с чекбоксами также осуществляется по схожему принципу, только вместо атрибута value указывается
- 19. Сделаем так, чтобы в зависимости от отметки чекбокса, на экран выводился либо один кусочек кода, либо
- 20. Практические задачи Дан чекбокс, кнопка и абзац. По клику на кнопку, если чекбокс отмечен, выведите в
- 21. Работа с селектами Работа с select также практически не отличается от работы с инпутами и чекбоксами.
- 22. Пусть у нас есть массив с текстами пунктов выпадающего списка: сформируем теги option в цикле
- 23. В тегах option есть атрибуты value В таком случае из-за наличия атрибутов value в стейт будут
- 24. Текст тега можно менять как угодно, при этом в скрипте результат выбора будет обрабатываться по значению
- 25. Работа с radio Работа с радиокнопочками radio несколько отличается, к примеру, от тех же чекбоксов. Проблема
- 26. Иногда может потребоваться сделать так, чтобы по умолчанию в input уже было какое-то значение. При этом
- 28. Скачать презентацию