如何在 onClick 中獲取 Material-UI Button 屬性？

Question

如何獲取 Material-UI Button 的屬性？ 我試過getAttribute()但它給了我null 。 我知道這可以使用普通的<button>標簽，但我想嘗試使用 Material-UI 按鈕。

我的按鈕-

<Button 
    variant="outlined" 
    id={button1} 
    button-key="buttonAttribute"
    onClick={this.isClicked}>
    MyButton
</Button>

點擊功能——

isClicked = (e) => {
   const attButton = e.target.getAttribute('button-key')
   console.log(attButton)
}

我的控制台返回null 。 它如何返回buttonAttribute

Answer 1

嘗試改用currentTarget

e.currentTarget.getAttribute("button-key")

您還可以通過在屬性名稱前加上data-*來使用數據屬性。 改用它是一個好習慣，因為它會為您的自定義屬性創建一個“命名空間”，因此它們不會與標准 HTML 屬性發生沖突。

<Button
  onClick={(e) => {
    console.log(e.currentTarget.dataset.buttonKey);
  }}
  data-button-key="buttonAttribute"
>

現場演示

Answer 2

它顯示為null ，因為如果您記錄e.target ，那么您將看到按鈕組件中存在的span元素，並且您將 id 傳遞給它的根元素，即div 。