如何定位Material-UI按钮的value或label属性而非通过class识别

你当前代码里获取不到e.target.value和e.target.label的核心原因是：value、label是你传给自定义组件GeneralButton的Props，没有透传到内部渲染的原生<button> DOM元素上，所以事件对象的target属性（指向原生DOM）自然读不到这些值。

方案1：使用标准自定义属性data-*（最稳妥） #

HTML原生支持data-前缀的自定义属性，不会和内置属性冲突，也不受Material-UI自动生成类名的影响。

• 第一步：改造GeneralButton组件，将标识属性透传到原生按钮上：

// GeneralButton 内部实现调整示例
const GeneralButton = ({ onClick, value, label, text, ...rest }) => {
  return (
    <button 
      onClick={onClick}
      // 把自定义标识存到data属性中
      data-btn-id={value}
      data-btn-label={label}
      {...rest}
    >
      {text}
    </button>
  )
}

• 第二步：在点击事件中通过dataset读取属性，注意用e.currentTarget避免事件冒泡导致的target指向子元素的问题：

const addItem = (e) => {
  const currentBtnId = e.currentTarget.dataset.btnId
  if(currentBtnId === 'somevalue') {
    // 对应按钮的逻辑
  } else {
    // 其他按钮的逻辑
  }
}

方案2：绑定事件时直接传参（更符合React开发习惯） #

不需要修改组件内部实现，也不需要操作DOM属性，直接在绑定回调时传入对应按钮的标识：

// 按钮调用处调整
<GeneralButton 
  onClick={() => addItem('somevalue')} 
  value='somevalue' 
  label='somelabel' 
  text={'Add an item'} 
/>

// 回调函数直接接收参数
const addItem = (btnId) => {
  if(btnId === 'somevalue') {
    // 对应逻辑
  }
}

方案3：透传原生value属性 #

如果你只是需要简单的字符串标识，可以直接把value透传给原生按钮，原生<button>本身支持value属性：

• 只需在GeneralButton内部的原生button上加上value={value}即可，后续可以直接通过e.currentTarget.value读取标识。

内容的提问来源于stack exchange，提问作者Richardson