代码之家 › 专栏 › 技术社区 › willywonka15

如何禁用react中的子菜单项?

antd reactjs

willywonka15 · 技术社区 · 7 年前

我用React创建菜单。js。但我有个问题。有2个子菜单,这些子菜单有其菜单项。当我将其中一个鼠标悬停时,它会显示其菜单项。但当我单击另一个子菜单时,它仍然显示以前的菜单项。我该如何预防?我的代码:

我的第一节课:Sider。js公司

function Sider(props) {
  return (
     <Menu mode="horizontal">
     selectedKeys={[props.current]}
     onClick={props.handleClick}
       <SubMenu title={<span><Icon type="setting" />Sub menu 1</span>}>
         <MenuItem> menu item 1</MenuItem>
         <MenuItem> menu item 2</MenuItem>
       </SubMenu>
       <SubMenu title={<span><Icon type="laptop" />Sub menu 2</span>}>
         <MenuItem> menu item 3</MenuItem>
       </SubMenu>
     </Menu>
  );
}

这是我的主要类,我称之为Sider函数。

主要的js:

import PropTypes from 'prop-types';

class Main extends React.Component {
   constructor(props) {
      super(props)
      this.state = {
         current: 'MenuItem'
      }
   }

   handleClick = (e) => {
      this.setState({
         current: e.key,
      });
   }

   render() {
     return (
        <div>
          <Sider navigation={this.props.navigation} handleClick={this.props.handleClick} current={this.state.current />
        </div>
     );
   }
}

Main.propTypes = {
   handleClick: PropTypes.func,
};

2 回复 | 直到 5 年前

Elumalai Kaliyaperumal 7 年前

您可以使用 key 保持活动状态 state selectedKeys . 请参阅下面的工作代码

我在这里打开了代码中的工作菜单 codepen

import PropTypes from 'prop-types';

class App extends React.Component {
  state = {
    current: 'menu1:1',
  }

  handleClick = (e) => {
    this.setState({
      current: e.key,
    });
  }

  render() {
    return (
      <div>
        <Sider navigation={this.props.navigation} handleClick={this.handeClick} current={this.state.current} />
      </div>
    );
  }
}

App.propTypes = {
   handleClick: PropTypes.func,
};

还有你的 Sider 函数如下所示

function Sider(props) {
  return (
     <Menu onClick={props.handleClick} selectedKeys={[props.current]}>
       <SubMenu title={<span><Icon type="setting" />Sub menu 1</span>}>
         <MenuItem key="setting:1"> menu item 1</MenuItem>
         <MenuItem key="setting:2"> menu item 2</MenuItem>
       </SubMenu>
       <SubMenu title={<span><Icon type="laptop" />Sub menu 2</span>}>
         <MenuItem key="laptop:1"> menu item 3</MenuItem>
       </SubMenu>
     </Menu>
  );
}

有关文档,请阅读 horizontal menu 和 Vertical Menu