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>

I want to create a dynamic tabular layout with closable feature by using Menu and tabular option. I put the Button component inside a Menu.Item and implement the onClick event. When the buton is clicked, it's also calling handleOpenClick() function on the Menu.Item component. I need to call the handleCloseClick() only.

Is there any suggestion ?

Sorry for my bad english

Answer 1

Try adding 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>