如何从材料ui中的"选择"获取"菜单项"中的自定义数据属性值



我正试图从材料ui 中获取MenuItem中的数据属性值

<MenuItem
value={one.supplier_Name}
key={one.supplier_Name}
data-id={one.supplier_ID}
>
{one.supplier_Name}
</MenuItem>

当调用SelectonChange事件时,从MenuItem。我试过

<Select 
labelId="demo-simple-select-label"
id="demo-simple-select"
value={newValues.supplier}
onChange={(e) => {

console.log(e.target.dataset.id);

}}
...MenuItem here
</Select>

但我认为,由于select上没有数据属性,它正在记录Cannot read property 'id' of undefinedSelect中触发onChange时,是否有其他方法可以获取选定的数据属性?

onChange处理程序函数中的事件参数包含两个属性:
  • target,其引用接收事件的元素
  • currentTarget,它引用附加处理程序的元素
    来源:MDN文档

在您的情况下,这是违反直觉的,但您应该使用currentTarget,因为Material UI为您的选择构建DOM元素的方式:

onChange={(e) => {
console.log(e.currentTarget.dataset.id);
}}

最新更新