使用反应引导分页组件获取分页按钮值

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

分页.Item 应该有 onClick，而不是分页

<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;
}