Question

我用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功能。

Main.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,
};

Answer 1

您可以使用key维护所选子菜单的有效state并使用selectedKeys。请参阅下面的工作代码

我在codeopen中创建了工作菜单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

Answer 2

你是如何实现悬停机制的？请添加更多代码。当你悬停时，你是否改变了每个SubMenu的内部状态？

您最好阅读antd组件的文档。转到以下link以更好地了解如何使用这些组件。

如何禁用子菜单项？

2 个答案: