onChange处理程序函数中的事件参数包含两个属性:
我正试图从材料ui 中获取MenuItem
中的数据属性值
<MenuItem
value={one.supplier_Name}
key={one.supplier_Name}
data-id={one.supplier_ID}
>
{one.supplier_Name}
</MenuItem>
当调用Select
onChange事件时,从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 undefined
在Select
中触发onChange
时,是否有其他方法可以获取选定的数据属性?
- target,其引用接收事件的元素
- currentTarget,它引用附加处理程序的元素
来源:MDN文档
在您的情况下,这是违反直觉的,但您应该使用currentTarget,因为Material UI为您的选择构建DOM元素的方式:
onChange={(e) => {
console.log(e.currentTarget.dataset.id);
}}