React语义UI-可关闭菜单表格/选项卡

Question

<Menu tabular>
 {
  menus.map((menu, index) => (
   <Menu.Item 
    key={index} 
    name={menu.name} 
    active={this.props.location.pathname === menu.path} 
    onClick={() => {this.props.handleOpenClick(menu)}} 
   >
    {menu.name}
    <Button onClick={() =>  {this.props.handleCloseClick(index)}}>X</Button>
   </Menu.Item>
  ))
 }
</Menu>

我想通过使用Menu和tabular选项创建具有可关闭功能的动态表格布局。 我将Button组件放在Menu.Item并实现onClick事件。 单击按钮后，它还会在Menu.Item组件上调用handleOpenClick()函数。 我只需要调用handleCloseClick() 。

有什么建议吗？

对不起，我的英语不好

Answer 1

尝试添加e.stopPropagation（） 。

<Menu tabular>
{
menus.map((menu, index) => (
    <Menu.Item 
        key={index} 
        name={menu.name} 
        active={this.props.location.pathname === menu.path} 
        onClick={() => {this.props.handleOpenClick(menu)}} 
    >
        {menu.name}
        <Button onClick={e =>  {
            e.stopPropagation();
            this.props.handleCloseClick(index);
        }}>X</Button>
    </Menu.Item>
    ))
}
</Menu>