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