如何禁用反应中的子菜单项？

Question

我用 React.js 创建了一个菜单。但是对我来说有一个问题。有 2 个子菜单，这些子菜单有它们的菜单项。当我悬停其中一个时，它会显示其菜单项。但是当我点击另一个子菜单时，它仍然显示以前的菜单项。我该如何预防？我的代码：

我的第一个 class : 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>
  );
}

这是我的主要 class，我称之为 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

你是如何实现悬停机制的？请添加更多代码。当你悬停时，你会改变每个子菜单的内部状态吗？

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

Answer 2

您可以使用 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 and Vertical Menu

如何禁用反应中的子菜单项？

How can I disabled sub menu item in react?

reactjs

antd