React中使用Material UI MenuItem时如何获取点击事件绑定的value值

解决方案 #

你遇到该问题的核心原因是event.target指向的是实际触发点击的元素（也就是MenuItem渲染后li内部的子节点），而非绑定onClick事件的MenuItem对应DOM节点，可通过以下三种常用方案拿到绑定的value值：

• 方案1：通过event.currentTarget取值
  event.currentTarget始终指向事件绑定的宿主元素，直接读取它的value属性即可，代码示例：

const handleItemValue = (event) => {
  const targetValue = event.currentTarget.value;
  // 后续业务逻辑
}

• 方案2：点击回调直接传递value参数
  如果value值在你的代码中可直接访问，绑定时直接把值传入回调函数，可控性更高：

// 定义回调
const handleItemValue = (value) => {
  const targetValue = value;
  // 后续业务逻辑
}

// 组件绑定部分
const itemValue = "VALUE TO RECOVER"
<MenuItem
  onClick={() => handleItemValue(itemValue)}
  value={itemValue}
>
 Option Text
</MenuItem>

• 方案3：配合Select组件使用时直接监听上层事件
  如果你是将MenuItem放在Material UI的Select组件内使用，无需给每个MenuItem单独绑定点击事件，直接监听Select的onChange事件即可拿到选中项的value：

import { useState } from 'react';
import { Select, MenuItem } from '@mui/material';

const Demo = () => {
  const [selectValue, setSelectValue] = useState('');

  const handleSelectChange = (event) => {
    setSelectValue(event.target.value);
  }

  return (
    <Select value={selectValue} onChange={handleSelectChange}>
      <MenuItem value="VALUE TO RECOVER">Option Text</MenuItem>
    </Select>
  )
}

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