React MUI MenuItem选中值捕获异常：event.currentTarget.value返回undefined

问题原因 #

MUI 的 <MenuItem> 是封装后的 React 组件，你传入的 value 是组件的 props，并非原生 DOM 元素的标准属性。虽然渲染后的 DOM 标签会显示 value="xxx"，但 <MenuItem> 最终渲染为 <li> 标签，原生 <li> 并没有 value 属性，所以直接调用 event.currentTarget.value 会返回 undefined。

解决方案 #

方案1：点击事件直接传值（推荐）

修改 onClick 回调，直接把需要的值作为参数传入处理函数：

<MenuItem 
  sx={{ color: 'text.secondary' }} 
  value={ContentTitle.contentTitle} 
  onClick={() => onSelectedContentTitle(ContentTitle.contentTitle)}
>
  <ListItemIcon></ListItemIcon>
  <ListItemText primary={ContentTitle.contentTitle} primaryTypographyProps={{ variant: 'body2' }} />
</MenuItem>

对应的处理函数：

const onSelectedContentTitle = (selectedValue) => {
  console.log("Selected value: ", selectedValue);
};

方案2：通过 DOM 获取自定义属性

利用原生 DOM 的 getAttribute 方法读取渲染后的自定义 value 属性：

const onSelectedContentTitle = (event) => {
  const selectedValue = event.currentTarget.getAttribute('value');
  console.log("Selected value: ", selectedValue);
};

方案3：配合 Select 组件使用（如果是在 Select 内）

如果 <MenuItem> 是放在 MUI <Select> 组件中，不要给单个 MenuItem 加点击事件，直接用 Select 的 onChange 事件获取选中值：

<Select 
  value={selectedValue} 
  onChange={(event) => setSelectedValue(event.target.value)}
>
  <MenuItem value={ContentTitle.contentTitle}>
    <ListItemIcon></ListItemIcon>
    <ListItemText primary={ContentTitle.contentTitle} primaryTypographyProps={{ variant: 'body2' }} />
  </MenuItem>
</Select>

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