如何在 onClick 中获取 Material-UI Button 属性？

Question

How to get the attribute of Material-UI Button?. I've tried the getAttribute() but it gives me null . I know this is possible using normal <button> tags but I want to try using Material-UI button.

My button-

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

click function -

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

My console returns null . How can it return buttonAttribute

Answer 1

Try using currentTarget instead

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

You can also use data attributes by prefixing your attribute name with data-* . It's a good practice to use this instead because it creates a ' namespace ' for your custom attribute so they won't clash with the standard HTML attributes.

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

Live Demo

Answer 2

它显示为null ，因为如果您记录e.target ，那么您将看到按钮组件中存在的span元素，并且您将 id 传递给它的根元素，即div 。