Как получить элемент, нажатый на клавишу, в React

Повторное использование компонентов — это основополагающая особенность создания приложений с помощью React. Часто одни и те же компоненты отображаются несколько раз, и нам нужен атрибут key, чтобы однозначно идентифицировать каждый экземпляр.

В этом руководстве мы узнаем, как получить ключ к выбранным элементам в React.

Получить ключ выбранных элементов в React

Для простоты давайте создадим страницу с тремя элементами span с разными значениями key.

<div>
      <span key={1}>element one</span>
      <span key={2}>element two</span>
      <span key={3}>element three</span>
</div>

Теперь давайте установим обработчик событий onClick для доступа к key элемента каждый раз при его нажатии.

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

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

<div>
      <span key={1} onClick={() => console.log(1)}>
        element one
      </span>
      <span key={2} onClick={() => console.log(2)}>
        element two
      </span>
      <span key={3} onClick={() => console.log(3)}>
        element three
      </span>
    </div>

Получите ключ при нажатии на динамически отображаемые элементы

Приведенный выше простой пример полезен для демонстрации того, как получить key элементов, по которым щелкнули, в React. Однако в большинстве случаев вам необходимо получить ключ динамически отображаемых компонентов (и элементов).

В React обычно визуализируют компоненты на основе массива. Обычно мы используем метод map() для возврата компонента для каждого элемента массива. Данные каждого элемента используются в качестве содержимого, свойств, атрибутов или даже для применения пользовательских стилей к элементам и компонентам.

Давайте рассмотрим пример:

function Hello() {
  const [key, setKey] = useState(null);
  const cities = ["London", "Paris", "Rome"];
  return (
    <div>
      {cities.map((city, index) => (
        <span key={index} onClick={() => setKey(index)}>
          {city}
        </span>
      ))}
      <p>Clicked element's key is {key}</p>
    </div>
  );
}

Мы используем метод map() для создания элементов <span> для каждого города в массиве cities. Каждая строка используется в качестве текстового содержимого для элементов <span>.

Функция обратного вызова внутри метода map имеет два аргумента. Первый аргумент city обозначает элемент массива. По умолчанию метод map() также принимает второй аргумент index, который является индексом каждого элемента массива.

Мы используем этот index для присвоения уникальных значений key элементам <span>. Обработчик событий onClick также принимает номер index и обновляет переменную состояния key.

Внутри JSX мы отображаем переменную состояния key, чтобы показать элемент, по которому был сделан щелчок.

Если вам понравилось это руководство, посетите мой блог о React.