Счетчик символов
Часть раздела Основы путешествия по React на Coddy — урок 30 из 42.
Поскольку текст — это состояние, вы можете вычислять значения на его основе при каждом рендере. Счётчик длины в стиле Твиттера пишется в одну строку:
<p>{message.length} characters</p>Никакого дополнительного состояния не требуется: message.length вычисляется из существующего состояния и автоматически пересчитывается при каждом нажатии клавиши. Практическое правило: если вы можете вычислить значение из уже имеющегося состояния, не сохраняйте его в useState.
Задание
ЛегкоСоздайте поле для био с динамическим счетчиком длины.
- Сделайте
input(id="bio") управляемым с помощью состоянияbio(изначально пустое). - Абзац (
id="length") отображаетN characters, где N — текущая длина bio (вычисляемая, а не хранимая).
Попробуйте сами
<!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