反応のサブメニュー項目を無効にするにはどうしたらいいですか？

Question

私はReact.jsでメニューを作成します。しかし、私には問題があります。 2つのサブメニューがあり、これらのサブメニューにはメニュー項目があります。私がそれらの1つを動かすとき、それはそのメニューアイテムを示す。しかし、別のサブメニューをクリックすると、以前のメニュー項目が表示されます。どうすればそれを防ぐことができますか？私のコード：

マイファーストクラス：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> 
); 
} 

は、これは私がサイダー関数を呼び出して、私のメインクラスです。

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

どのようにホバリングメカニズムを実装しましたか？コードを追加してください。 ホバーアウト時に各サブメニューの内部状態を変更しますか？

antdのコンポーネントのドキュメントをよく読んでください。 これらのコンポーネントの使用方法を理解するには、linkにアクセスしてください。