Добавление интерактивности с помощью состояния

Давайте рассмотрим, как React помогает нам добавлять интерактивность с помощью состояния (state) и обработчиков событий (event handlers).

В качестве примера создадим кнопку "Нравится" внутри вашего компонента HomePage. Сначала добавим элемент button внутрь оператора return():

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

Прослушивание событий

Чтобы кнопка выполняла действие при клике, можно использовать событие onClick:

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

В React имена событий записываются в camelCase. Событие onClick — одно из многих возможных событий, на которые можно реагировать. Например, можно использовать onChange для полей ввода или onSubmit для форм.

Обработка событий

Вы можете определить функцию для "обработки" событий при их срабатывании. Создадим функцию handleClick() перед оператором return:

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

Затем можно вызвать функцию handleClick при срабатывании события onClick:

function HomePage() {
  // 	...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

Попробуйте запустить это в браузере. Обратите внимание в инструментах разработчика, как увеличивается количество логов.

Состояние и хуки

React предоставляет набор функций, называемых хуками (hooks). Хуки позволяют добавлять дополнительную логику, такую как состояние (state), в ваши компоненты. Состояние можно рассматривать как любую информацию в вашем интерфейсе, которая изменяется со временем, обычно в результате взаимодействия с пользователем.

Вы можете использовать состояние для хранения и увеличения количества кликов по кнопке "Нравится". Фактически, хук React для управления состоянием называется useState().

Добавим useState() в проект. Он возвращает массив, и вы можете получить доступ к его значениям внутри компонента с помощью деструктуризации массива:

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

Первый элемент массива — это значение состояния, которое можно назвать как угодно. Рекомендуется давать описательные имена:

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

Второй элемент массива — это функция для обновления значения. Её можно назвать как угодно, но обычно используют префикс set с именем переменной состояния:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

Можно также задать начальное значение состояния likes как 0:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

Затем можно проверить, работает ли начальное состояние, используя переменную состояния внутри компонента.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

Наконец, можно вызвать функцию обновления состояния setLikes внутри компонента HomePage. Добавим её в ранее определённую функцию handleClick():

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

Теперь при клике на кнопку будет вызываться функция handleClick, которая вызывает функцию обновления состояния setLikes с аргументом — текущим количеством лайков + 1.

Примечание: В отличие от пропсов (props), которые передаются компоненту как первый параметр функции, состояние инициализируется и хранится внутри компонента. Вы можете передавать информацию о состоянии дочерним компонентам через пропсы, но логика обновления состояния должна оставаться в компоненте, где оно было создано.

Управление состоянием

Это было лишь введение в состояние, и есть ещё многое, что можно изучить об управлении состоянием и потоке данных в React-приложениях. Чтобы узнать больше, рекомендуем ознакомиться с разделами Добавление интерактивности и Управление состоянием в документации React.

Дополнительные ресурсы:

• Состояние: память компонента
• Знакомство с первым хуком
• Реакция на события