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事件。点击按钮后，它还会在handleOpenClick()组件上调用Menu.Item功能。我只需要拨打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>

React semantic-ui - Closable菜单表格/选项卡

1 个答案: