Получение значения кнопки нумерации страниц с компонентом response- bootstrap Pagination - PullRequest
Новая
       5

Получение значения кнопки нумерации страниц с компонентом response- bootstrap Pagination

0 голосов
/ 25 января 2020

У меня есть простая нумерация страниц, похожая на реакции- bootstrap документы для нумерации страниц . Мне нужно знать, какая именно кнопка c была нажата, поэтому я добавил атрибуты данных в компоненты Pagination.Item. Мой атрибут данных называется «data-page».

Каждый ключевой атрибут для элементов нумерации страниц должен быть уникальным, поэтому я решил, что необходимо иметь атрибут data-page. 

<Pagination onClick={debugClick}>
  <Pagination.First key={0} data-page={1} />
  <Pagination.Item key={1} data-page={1}>
    {1}
  </Pagination.Item>
  <Pagination.Item key={2} data-page={2}>
    {2}
  </Pagination.Item>
  <Pagination.Item key={3} data-page={3}>
    {3}
  </Pagination.Item>
  <Pagination.Last key={4} data-page={3} />
</Pagination>

Проблема в том, что, когда я нажимаю на одну из кнопок нумерации страниц, кажется, что есть разница, если я нажимаю непосредственно на число или где-то в стороне от числа. Я вижу это в моем обработчике onClick. Меня беспокоит, что этот метод определения атрибута страницы данных ненадежен. 

const debugClick = (e) => {
  const clickValue = e.target.offsetParent.getAttribute('data-page')
    ? e.target.offsetParent.getAttribute('data-page')
    : e.target.getAttribute('data-page');
  console.log( clickValue );
};

Обратите внимание, что иногда атрибут находится внутри offsetParent, но в других случаях он просто находится непосредственно внутри цели события. Я также мог бы сделать это: 

const debugClick = (e) => {
  const clickValue = e.target.tagName == 'SPAN'
    ? e.target.offsetParent.getAttribute('data-page')
    : e.target.getAttribute('data-page');
  console.log( clickValue );
};

На данный момент, в Linux desktop Firefox (не проверено на других устройствах и браузерах), это, кажется, работает нормально, но я боюсь, что это происходит сломать, потому что это не похоже на solid код. Поэтому я здесь, чтобы спросить, как правильно получить значение моего атрибута страницы данных. Как можно наиболее надежно получить значение во всех браузерах?

Дополнительная информация: Я видел эту проблему , но я не хочу, чтобы текст внутри кнопка. Было бы намного чище, если бы я мог получить значение моего атрибута данных.

...