使用 react-bootstrap Pagination 组件获取分页按钮值

Question

我有一个简单的分页，类似于分页的react-bootstrap 文档。 我确实需要知道单击了哪个特定按钮，因此我向 Pagination.Item 组件添加了数据属性。 我的数据属性被命名为“数据页”。

分页项的每个关键属性都必须是唯一的，这就是为什么我觉得有必要拥有一个数据页属性。

<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 桌面 Firefox（未在其他设备和浏览器上测试）中，这似乎工作正常，但我担心这会中断，因为它看起来不像是可靠的代码。 所以我在这里询问处理获取我的数据页面属性值的正确方法是什么。 我怎样才能最可靠地在所有浏览器中获得价值？

更多信息：我确实看到了 这个问题，但我不想在按钮内获取文本。 如果我能得到我的数据属性的值，那就更简洁了。

Answer 1

Pagination.Item 应该有 onClick，而不是 Pagination

<Pagination>
 <Pagination.Item key={1} onClick={(event) => this.paginationClicked(event)}>
   {1}
 </Pagination.Item>
 <Pagination.Item key={2} onClick={(event) => this.paginationClicked(event)}>
   {2}
 </Pagination.Item>
 <Pagination.Item key={3} onClick={(event) => this.paginationClicked(event)}>
   {3}
 </Pagination.Item>
</Pagination>

然后你可以通过 event.target.text 访问它

paginationClicked = (event) => {
  var itemClicked = event.target.text;
}