Как обеспечить, чтобы весь компонент Button в material-ui возвращал одинаковое значение идентификатора для события onClick?

Question

При попытке консольной регистрации идентификатора компонента Button, идентификатор регистрируется правильно только при нажатии на края кнопки (за пределами класса, который содержит метку кнопки). Эта проблема не возникает на обычной кнопке js, где текст включен в компонент. Как я могу обеспечить правильное значение идентификатора для всего компонента Button?

Компонент кнопки и реализация onClick:

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

Реализация, работающая с обычной кнопкой:

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

Консоль при нажатии на центр кнопки против щелчка по краю кнопки

Край кнопки (зеленый) и текст диапазона кнопки (синий)

Answer 1

Вы можете попытаться добавить атрибут data-index к своему компоненту и получить его обратно, используя метод getAttribute.

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

Answer 2

Ах, я вижу проблему здесь. Решение состоит в том, чтобы ссылаться на currentTarget.id, а не target.value из события syntheti c (e). Это работает для всей кнопки, потому что:

• target - это элемент, который вызвал событие (например, пользователь щелкнул)
• currentTarget - это элемент, к которому присоединен прослушиватель событий .