React-Menu点击菜单项时e.value返回undefined问题求助

问题原因 #

你当前的代码里，所有<MenuItem>和<SubMenu>都没有设置value属性，而组件点击事件参数中的e.value正是对应组件的value属性值，未配置时自然返回undefined。

修复方案 #

给需要获取值的<MenuItem>添加value属性即可。如果不需要监听<SubMenu>的点击事件，可以直接移除它的onClick回调（SubMenu主要作用是展开子菜单，点击它本身通常不需要触发业务逻辑）。

修改后的代码示例 #

const ref = useRef(null);
const [isOpen, setOpen] = useState(false);
const [menuState, toggle] = useMenuState({ transition: true });
const { anchorProps, hoverProps } = useHover(isOpen, setOpen);

const getProductMenu = () => {
  return (
    <>
      <div className="my-menu" ref={ref} {...anchorProps}>
        Products
      </div>

      <ControlledMenu
        className="sub-menu"
        {...hoverProps}
        {...menuState}
        state={isOpen ? 'open' : 'closed'}
        anchorRef={ref}
        onClose={() => setOpen(false)}
        onClick={(e) => console.log(`[ControlledMenu] ${e.value} clicked`)}
      >
        <MenuItem 
          className={menuItemClassName} 
          value="single"
          onClick={(e) => console.log(`[MenuItem] ${e.value} clicked`)}
        >
          Single
        </MenuItem>

        <SubMenu 
          className="sub-menu" 
          label={<div className={menuItemClassName}>Sub Menu</div>}
        >
          <MenuItem 
            value="1"
            onClick={(e) => console.log(`[MenuItem1] ${e.value} clicked`)} 
            className={menuItemClassName}
          >
            1
          </MenuItem>
        </SubMenu>
      </ControlledMenu>
    </>
  );
};

效果验证 #

修改后点击菜单项，控制台会输出对应的value值：

[MenuItem1] 1 clicked
[ControlledMenu] 1 clicked

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