Состояние
и события

Категория

React

Уровень

Начальный

Что понадобится

Проект zayavki после главы 1.3, запущенный npm run dev, браузер Chrome, Edge или Яндекс Браузер

Результат

Кнопка в карточке переводит заявку из «Новая» в «В работе» и «Готово», шапка показывает число новых заявок

§1Событие и обработчик

Событие — то, что происходит на странице и о чём браузер может сообщить программе: щелчок мышью, нажатие клавиши, ввод текста в поле, отправка формы. Обработчик события — функция, которую браузер вызывает, когда событие произошло. В React обработчик подключают к тегу атрибутом, имя которого начинается с on: onClick — щелчок, onChange — изменение поля, onSubmit — отправка формы. Значение атрибута — сама функция в фигурных скобках: <button onClick={handleClick}>.

Функцию-обработчик обычно объявляют внутри компонента, перед return. По договорённости её имя начинается с handle («обработать») и продолжается названием события: handleClick, handleSubmit. Так по имени видно, что функция вызывается браузером в ответ на действие пользователя.

Кнопка в карточке

В первой версии обработчик печатает сообщение в консоль браузера, страница при этом не меняется. По сообщению в консоли видно, что щелчок дошёл до функции.

1. Добавьте стили кнопки

   Откройте src/index.css, вставьте в самый конец файла правила ниже и сохраните.

   .card button {
     margin-top: 12px;
     padding: 6px 12px;
     border: 1px solid #2f6fde;
     border-radius: 6px;
     background: #ffffff;
     color: #2f6fde;
     font: inherit;
     font-size: 14px;
     cursor: pointer;
   }
   
   .card button:disabled {
     border-color: #c4cad8;
     color: #8a93a6;
     cursor: default;
   }

   Первое правило оформляет кнопку внутри карточки: синяя рамка, белый фон, отступ сверху. Второе, с :disabled, задаёт серый вид выключенной кнопки; выключенная кнопка понадобится в §3.

2. Замените содержимое RequestCard.tsx

   Откройте src/components/RequestCard.tsx, замените весь текст кодом ниже и сохраните.

   type Status = 'Новая' | 'В работе' | 'Готово'
   
   type RequestCardProps = {
     title: string
     room: string
     details: string
     status?: Status
   }
   
   function RequestCard({ title, room, details, status = 'Новая' }: RequestCardProps) {
     function handleClick() {
       console.log('Нажата кнопка в заявке:', title)
     }
   
     return (
       <article className="card">
         <div className="card__top">
           <span className="card__room">каб. {room}</span>
           <span className="card__status">{status}</span>
         </div>
         <h3>{title}</h3>
         <p>{details}</p>
         <button onClick={handleClick}>Взять в работу</button>
       </article>
     )
   }
   
   export default RequestCard

   

3. Откройте консоль браузера

   В браузере с доской заявок нажмите F12 (на macOS — Cmd+Option+J) и выберите вкладку Console. Нажмите кнопку «Взять в работу» в каждой из трёх карточек.

   

В функции handleClick одна команда — console.log. Она печатает в консоль браузера свои аргументы через пробел: строку 'Нажата кнопка в заявке:' и значение title. Консоль — панель инструментов разработчика, куда попадают сообщения программы и ошибки; на странице эти сообщения не видны. Справа от каждого сообщения указан файл и строка, где оно напечатано: RequestCard.tsx:12.

У каждой карточки свой обработчик с её собственным title: функция RequestCard вызывается три раза, и при каждом вызове создаётся отдельная handleClick. Поэтому в консоли три разных названия заявок. При открытии страницы в консоли может быть и сообщение React с предложением установить расширение React DevTools; для работы в этой главе оно не требуется.

Щелчок доходит до обработчика. Следующий шаг — изменение статуса заявки в обработчике.

§2Опыт с обычной переменной

Изменяемые данные в JavaScript хранят в переменной, объявленной словом let. Опыт проверяет, можно ли так хранить статус: переменная выводится в разметке и меняется в обработчике. Замените содержимое RequestCard.tsx кодом ниже и сохраните.

type Status = 'Новая' | 'В работе' | 'Готово'

type RequestCardProps = {
  title: string
  room: string
  details: string
  status?: Status
}

function RequestCard({ title, room, details, status = 'Новая' }: RequestCardProps) {
  let current = status

  function handleClick() {
    current = 'В работе'
    console.log('current =', current)
  }

  return (
    <article className="card">
      <div className="card__top">
        <span className="card__room">каб. {room}</span>
        <span className="card__status">{current}</span>
      </div>
      <h3>{title}</h3>
      <p>{details}</p>
      <button onClick={handleClick}>Взять в работу</button>
    </article>
  )
}

export default RequestCard

Изменились три места. В строке 11 объявлена переменная current («текущий статус») с начальным значением из props. В обработчике ей присваивается 'В работе', и новое значение печатается в консоль. В разметке на месте статуса стоит {current}. Нажмите дважды «Взять в работу» в первой карточке.

В консоли сообщение current = В работе; кружок с цифрой 2 слева означает, что одинаковое сообщение напечатано два раза подряд. Значит, обработчик выполнился и переменная изменилась, но статус на карточке остался «Новая».

Причина в том, как React строит страницу. Разметку карточки возвращает функция RequestCard, и React вызывает её, когда отрисовывает компонент. Вызов функции компонента называется отрисовкой (в документации — render). После отрисовки React переносит полученную разметку в страницу и больше функцию не вызывает, пока не получит сигнал, что данные изменились. Присваивание current = 'В работе' такого сигнала не даёт: переменная поменялась, но функция RequestCard не вызвана заново, и разметка на странице осталась от первой отрисовки.

Если бы React и вызвал функцию заново, статус всё равно вернулся бы к «Новая»: строка let current = status выполняется при каждом вызове и создаёт переменную с начальным значением. Обычная переменная существует только внутри одного вызова функции.

Что показывает линтер

Эту ошибку находит линтер Oxlint, установленный в проект в главе 1.1. Откройте второй терминал (Terminal → New Terminal; первый занят сервером разработки) и выполните команду:

npm run lint

Оба предупреждения относятся к строке 14, символ 5 — к присваиванию current = 'В работе'. Первое переводится так: «нельзя присваивать переменной новое значение после завершения отрисовки; это может привести к несогласованному поведению при следующих отрисовках». В конце обоих сообщений подсказка: Consider using state instead — «используйте вместо этого состояние». Состояние разобрано в следующем разделе.

Нужна переменная, которая сохраняет значение между вызовами функции и при изменении вызывает отрисовку заново. В React это состояние.

§3Состояние: хук useState

Состояние (state) — данные компонента, которые React хранит между отрисовками и при изменении которых отрисовывает компонент заново. Состояние создаётся функцией useState из библиотеки React. Функции React, имена которых начинаются с use, называются хуками (от англ. hook — крючок): через них компонент пользуется механизмами React, например хранением состояния.

  const [current, setCurrent] = useState(status)

useState(status) получает начальное значение — здесь статус из props — и возвращает пару: текущее значение и функцию для его изменения. Квадратные скобки слева раскладывают пару по двум переменным, так же как фигурные скобки в главе 1.3 распаковывали объект props. Имена выбирает разработчик; по договорённости вторая переменная называется как первая с приставкой set: current и setCurrent. Слово const означает, что переменной нельзя присвоить другое значение: значение меняется только через setCurrent.

Вызов setCurrent('В работе') делает две вещи. Он сохраняет новое значение в React и сообщает React, что компонент нужно отрисовать заново. При следующем вызове функции RequestCard строка с useState вернёт уже 'В работе'; начальное значение используется только при первой отрисовке.

1. Замените содержимое RequestCard.tsx

   import { useState } from 'react'
   
   type Status = 'Новая' | 'В работе' | 'Готово'
   
   type RequestCardProps = {
     title: string
     room: string
     details: string
     status?: Status
   }
   
   function RequestCard({ title, room, details, status = 'Новая' }: RequestCardProps) {
     const [current, setCurrent] = useState(status)
   
     function handleClick() {
       if (current === 'Новая') {
         setCurrent('В работе')
       } else {
         setCurrent('Готово')
       }
     }
   
     return (
       <article className="card">
         <div className="card__top">
           <span className="card__room">каб. {room}</span>
           <span className="card__status">{current}</span>
         </div>
         <h3>{title}</h3>
         <p>{details}</p>
         <button onClick={handleClick} disabled={current === 'Готово'}>
           {current === 'Новая' ? 'Взять в работу' : 'Завершить'}
         </button>
       </article>
     )
   }
   
   export default RequestCard

   

2. Проверьте кнопки

   Нажмите «Взять в работу» в первой карточке и «Взять в работу», затем «Завершить» во второй.

   

Первая строка import { useState } from 'react' подключает хук из библиотеки React. Фигурные скобки в импорте означают, что берётся функция с именем useState: библиотека React содержит много функций, и в файл подключают только нужные.

В обработчике стоит условие if … else. Знак === сравнивает два значения и даёт true, если они равны. Если текущий статус «Новая», он становится «В работе», иначе — «Готово». Так одна кнопка проводит заявку по двум шагам.

У кнопки появился второй атрибут: disabled={current === 'Готово'}. Атрибут disabled выключает кнопку, если его значение true: выключенная кнопка не нажимается, и правило .card button:disabled из первого шага красит её в серый цвет. Заявку в статусе «Готово» дальше переводить некуда, поэтому кнопка выключена.

Текст кнопки задан выражением {current === 'Новая' ? 'Взять в работу' : 'Завершить'}. Это тернарный оператор — условие в одну строку: условие ? значение_если_да : значение_если_нет. Пока заявка новая, на кнопке «Взять в работу», после этого — «Завершить». Условие с if внутри JSX записать нельзя, потому что в фигурных скобках JSX допускается только выражение, дающее значение; тернарный оператор — выражение.

Вызов обработчика вместо передачи

В §1 говорилось, что после имени обработчика в onClick скобки не ставятся. Если в этой версии карточки написать onClick={handleClick()} и сохранить файл, страница станет пустой, а в консоли появится ошибка.

Ошибка Too many re-renders. React limits the number of renders to prevent an infinite loop переводится как «слишком много повторных отрисовок; React ограничивает их число, чтобы не допустить бесконечного цикла». Со скобками handleClick выполняется во время отрисовки и вызывает setCurrent. Вызов setCurrent требует новой отрисовки, в ней снова выполняется handleClick, и цикл не заканчивается. Строка ниже, An error occurred in the <RequestCard> component, указывает компонент, в котором произошла ошибка. Ту же ошибку до запуска показывает редактор: Type 'void' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined' — «результат функции нельзя передать туда, где ожидается обработчик щелчка». Уберите скобки и сохраните.

Кнопки работают. Следующий раздел показывает шаги между щелчком и новым статусом на экране.

§4Как React обновляет страницу

Между щелчком и новым статусом на экране проходит пять шагов. Схема ниже показывает их на первой карточке.

На шаге 5 React сравнивает разметку, которую функция вернула сейчас, с разметкой прошлой отрисовки и меняет в браузере только отличия — здесь текст статуса и текст кнопки. Остальная страница не перестраивается. Повторный вызов функции компонента React выполняет при каждом изменении состояния. Это та же формула из главы 0.1: интерфейс — функция от состояния, UI = f(state). Разработчик описывает, как выглядит карточка при данном статусе, а перенос изменений на страницу выполняет React.

У каждой карточки своё состояние

На снимке в §3 первая карточка перешла в «В работе», вторая — в «Готово», и друг на друга они не повлияли. Состояние привязано к каждому вызову RequestCard на странице. React хранит отдельную пару «значение и функция изменения» для каждой из трёх карточек и при отрисовке выдаёт каждой её собственное значение. Тот же компонент, вызванный в другом месте, начнёт со своего начального значения.

Каждая карточка хранит свой статус. Следующая задача — вывести в шапке число новых заявок, а для этого статусы нужны в одном месте.

§5Состояние в родителе

Шапка доски должна показывать «Новых заявок: 1». Для этого числа нужны статусы всех трёх заявок, а сейчас каждый статус хранится внутри своей карточки, и ни App, ни Header к нему доступа не имеют: данные в React передаются только от родителя к ребёнку (глава 1.3, §6). Решение — хранить состояние в ближайшем общем родителе тех компонентов, которым оно нужно. Для карточек и шапки это App. Перенос состояния из дочерних компонентов в родителя называется подъёмом состояния (lifting state up).

После подъёма карточка снова получает статус через props, как в главе 1.3. Но менять его она не может: props только для чтения. Поэтому вместе со статусом родитель передаёт карточке функцию — prop onNext. Карточка вызывает её при щелчке, а функция в App меняет состояние. Prop с функцией, через который ребёнок сообщает родителю о событии, по договорённости называют с приставкой on: onNext, onDelete, onSave.

1. Добавьте стиль счётчика

   В конец src/index.css добавьте правило и сохраните.

   .header__count {
     display: inline-block;
     margin-top: 12px;
     padding: 3px 12px;
     border-radius: 12px;
     background: #2f6fde;
     font-size: 14px;
   }

2. Шапка получает число

   Замените содержимое src/components/Header.tsx и сохраните.

   type HeaderProps = {
     newCount: number
   }
   
   function Header({ newCount }: HeaderProps) {
     return (
       <header className="header">
         <h1>Доска заявок</h1>
         <p>ИТ-отдел колледжа · заявки студентов и преподавателей</p>
         <span className="header__count">Новых заявок: {newCount}</span>
       </header>
     )
   }
   
   export default Header

   После сохранения VS Code подчеркнёт <Header /> в App.tsx: шапке не передан обязательный prop newCount. Это исправит шаг 4.

3. Карточка получает статус и функцию

   Замените содержимое src/components/RequestCard.tsx и сохраните.

   export type Status = 'Новая' | 'В работе' | 'Готово'
   
   type RequestCardProps = {
     title: string
     room: string
     details: string
     status: Status
     onNext: () => void
   }
   
   function RequestCard({ title, room, details, status, onNext }: RequestCardProps) {
     return (
       <article className="card">
         <div className="card__top">
           <span className="card__room">каб. {room}</span>
           <span className="card__status">{status}</span>
         </div>
         <h3>{title}</h3>
         <p>{details}</p>
         <button onClick={onNext} disabled={status === 'Готово'}>
           {status === 'Новая' ? 'Взять в работу' : 'Завершить'}
         </button>
       </article>
     )
   }
   
   export default RequestCard

   В App.tsx подчеркнутся три вызова карточки: им не передан onNext. Их тоже исправит шаг 4.

4. Состояние в App

   Замените содержимое src/App.tsx и сохраните.

   import { useState } from 'react'
   import Header from './components/Header'
   import RequestForm from './components/RequestForm'
   import RequestCard, { type Status } from './components/RequestCard'
   
   function nextStatus(status: Status): Status {
     if (status === 'Новая') {
       return 'В работе'
     }
     return 'Готово'
   }
   
   function App() {
     const [status1, setStatus1] = useState<Status>('Новая')
     const [status2, setStatus2] = useState<Status>('В работе')
     const [status3, setStatus3] = useState<Status>('Готово')
   
     const newCount = [status1, status2, status3].filter((s) => s === 'Новая').length
   
     return (
       <>
         <Header newCount={newCount} />
         <main className="board">
           <RequestForm />
           <section className="list">
             <h2>Заявки</h2>
             <RequestCard
               title="Не работает проектор"
               room="214"
               details="Проектор включается, но изображения на экране нет."
               status={status1}
               onNext={() => setStatus1(nextStatus(status1))}
             />
             <RequestCard
               title="Нет интернета"
               room="305"
               details="На всех компьютерах в кабинете не открываются сайты."
               status={status2}
               onNext={() => setStatus2(nextStatus(status2))}
             />
             <RequestCard
               title="Замятие бумаги в принтере"
               room="112"
               details="Принтер пишет «замятие бумаги», лоток пустой."
               status={status3}
               onNext={() => setStatus3(nextStatus(status3))}
             />
           </section>
         </main>
       </>
     )
   }
   
   export default App

   

5. Проверьте счётчик

   Обновите страницу в браузере. В шапке — «Новых заявок: 1». Нажмите «Взять в работу» в первой карточке.

   

   

Разбор RequestCard.tsx

Из карточки удалены useState и handleClick: своего состояния у неё больше нет. В типе props два изменения. status: Status снова обязательный, без ? и без значения по умолчанию, потому что статус теперь всегда приходит из App. Новое поле onNext: () => void описывает функцию: пустые скобки — функция без параметров, void после стрелки — функция ничего не возвращает. Кнопка получает эту функцию напрямую: onClick={onNext}. Перед type Status появилось слово export: тип нужен в App.tsx, и его нужно сделать доступным из других файлов.

Разбор App.tsx

Четвёртая строка импортирует из одного файла два имени: RequestCard — экспорт по умолчанию, без скобок, и Status — именованный экспорт, в фигурных скобках. Слово type перед Status отмечает, что подключается только тип. Описания типов удаляются при переводе TypeScript в JavaScript, и настройки проекта Vite требуют отмечать такие импорты явно; без слова type редактор покажет ошибку TS1484.

Функция nextStatus записана вне App: состояние и props в ней не используются, она вычисляет следующий статус по текущему. Запись (status: Status): Status означает «принимает статус и возвращает статус». Логика та же, что была в handleClick карточки: из «Новая» — «В работе», из остальных — «Готово».

Три строки с useState создают три состояния — по одному на заявку. В угловых скобках useState<Status> указан тип значения. Без них TypeScript вывел бы из начального значения 'Новая' тип string, то есть любую строку, и передать такое значение в prop status типа Status было бы нельзя. В карточке в §3 угловые скобки не требовались: начальным значением был prop, у которого тип Status уже указан.

Строка с newCount считает новые заявки. [status1, status2, status3] собирает три статуса в массив — список значений в квадратных скобках. Метод filter оставляет в массиве только элементы, для которых условие s === 'Новая' истинно, а .length даёт их количество. Работа с массивами подробно разобрана в главе 1.5. Число newCount не хранится в состоянии: оно вычисляется из состояния при каждой отрисовке App. Данные, которые можно вычислить из уже имеющихся, в отдельное состояние не записывают, иначе два значения пришлось бы обновлять вместе и они могли бы разойтись.

Каждой карточке передаются status={status1} и onNext={() => setStatus1(nextStatus(status1))}. Запись () => … — стрелочная функция: короткая функция без имени, у которой после стрелки записано, что она делает. Здесь она нужна, потому что onNext должен получить функцию, которую карточка вызовет позже. Запись без стрелки, onNext={setStatus1(nextStatus(status1))}, вызвала бы setStatus1 сразу при отрисовке — та же ошибка, что с handleClick() в §3.

Цепочка при щелчке в первой карточке такая. Кнопка вызывает onNext, то есть стрелочную функцию из App. Та вычисляет nextStatus('Новая'), получает «В работе» и вызывает setStatus1. React отрисовывает App заново: status1 равен «В работе», newCount пересчитывается и становится 0, шапка и карточки получают новые props.

В App.tsx остался повтор: три состояния и три почти одинаковых вызова карточки. Для доски с десятками заявок статусы хранят одним списком и выводят карточки из него циклом. Это тема главы 1.5.

§6Частые ошибки

Сообщения ниже получены в проекте zayavki: ошибки типов — командой tsc -b, предупреждения — командой npm run lint, ошибка «Too many re-renders» — в консоли браузера.

§7Проверьте себя

Шпаргалка

Итог главы

Событие — действие пользователя, о котором сообщает браузер; обработчик — функция, подключённая к тегу атрибутом onClick, onChange или другим с приставкой on. Функция передаётся без скобок, иначе она выполнится при отрисовке. Изменение обычной переменной не меняет страницу: React обновляет разметку, только когда вызывает функцию компонента заново. Повторную отрисовку запускает изменение состояния — значения из хука useState, которое React хранит между отрисовками; меняется оно функцией вида setValue. После изменения React вызывает компонент, сравнивает новую разметку с прежней и меняет на странице только отличия. Если состояние нужно нескольким компонентам, его хранят в их общем родителе: родитель передаёт детям данные через props, а дети сообщают о событиях, вызывая переданные функции. Доска заявок переводит заявки по статусам кнопкой в карточке и показывает в шапке число новых.

Источники

1. react.dev — Responding to Events
2. react.dev — State: A Component's Memory
3. react.dev — Render and Commit
4. react.dev — State as a Snapshot
5. react.dev — Sharing State Between Components
6. react.dev — Rules of Hooks
7. developer.chrome.com — Console overview