Счетчик с шагом
Часть раздела Основы путешествия по React на Coddy — урок 24 из 42.
Сеттер принимает любое новое значение: вы не ограничены прибавлением +1. Добавьте 5, удвойте его, сбросьте до нуля:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Кнопки для разных значений — это просто разные обработчики одного и того же состояния:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Задание
ЛегкоИгра дает 5 очков за монету.
- Добавьте состояние
pointsсо начальным значением 0 и отобразите его в span сid="points". - Кнопка
Collect coin(id="coin") добавляет 5 за каждый клик.
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React