如何确保 material-ui 中的整个 Button 组件为 onClick 事件返回相同的 ID 值？

Question

When attempting to console log the ID of the Button component, the ID is only correctly logged when pressing the edges of the button (outside of the class that contains the button label). This problem doesn't occur on a normal js button where the text is included in the component. How do I ensure the proper ID value is returned for the whole Button component?

Button Component and onClick implementation:

<Button
  onClick={(e) => handleInput(e, "value")}
  value={"Grocery Store Workers"} 
  size="small"
  color="primary"
>
  Select
</Button>

const handleInput = (e) => {
  e.preventDefault();
  console.log(e.target.value)
  setCardSelected(e.target.value);
}

Implementation working with normal button:

<button
  onClick={(e) => handleInput(e, "value")} 
  value={"Grocery Store Workers"} 
  size="small"
  color="primary"
>
  Select
</button>

Console when clicking button center vs clicking button edge

Button edge (green) vs button span text (blue)

Answer 1

Ah, I see the issue here. The solution is to reference to currentTarget.id rather than target.value from the synthetic event (e). This works on the whole button because:

• target is the element that triggered the event (eg, the user clicked on)
• currentTarget is the element that the event listener is attached to.

Answer 2

You can try to add a data-index attribute to your component and get it back using getAttribute method.

<Button
  onClick={(e) => handleInput(e, "value")}
  value={"Grocery Store Workers"} 
  size="small"
  color="primary"
  data-index={//your id}
>
  Select
</Button>

const handleInput = (e) => {
  e.preventDefault();
  console.log(e.currentTarget.getAttribute('data-index'))
  setCardSelected(e.currentTarget.getAttribute('data-index'));
}