React-admin MenuItemLink onClick 不起作用答案

【问题标题】：React-admin MenuItemLink onClick not workingReact-admin MenuItemLink onClick 不起作用
【发布时间】：2020-05-27 13:09:46
【问题描述】：

我的 react-admin v3 运行非常顺利，但我在一点上苦苦挣扎。

我已经设置了一个自定义用户菜单组件，如下所示，但是根本没有调用 handleClick 事件 - 控制台中没有任何内容，也没有打开窗口。相反，浏览器导航到 /billing

render() {
        const { crudGetOne, profile, ...props } = this.props;

        const handleClick = (e) => {
            e.preventDefault();
            e.stopPropagation();
            console.log("In usermenu handleClick");
            console.log("Opening window to {process.env.REACT_APP_BILLING_URL}");
            window.open("{process.env.REACT_APP_BILLING_URL}", '_blank');

        }

        return (
            <UserMenu {...props}>
                <MenuItemLink
                    to="/profile"
                    primaryText="Profile"
                    leftIcon={<AccountCircleIcon />}
                />
                <MenuItemLink
                    to="/billing"
                    primaryText="Billing"
                    leftIcon={<PaymentIcon />}
                    onClick={handleClick}
                    component={Link}
                >Billing</MenuItemLink>
            </UserMenu>
        );
    }

如果有人可以提供帮助，或者建议另一种方法来从菜单项打开外部链接，那就太好了，这已经困扰了我很久了。令人惊讶的是，我找不到其他人问同样的问题。

问候，安迪

【问题讨论】：

标签： material-ui react-admin

【解决方案1】：

该示例在文档中看起来有所不同：

const CustomUserMenu = (props) => {
  return (
    <UserMenu {...props}>
      <MenuItemLink
        to="/billing"
        primaryText="Billing"
        leftIcon={<PaymentIcon />}

        onClick={props.onClick} // close the menu on click!
      />
    </UserMenu>
  )
}

这有点混乱，但是在 UserMenu 内部重新定义了 onClick 事件：

...(cloneElement(menuItem, { onClick: handleClose }))

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/UserMenu.js

【讨论】：