반응에서 하위 메뉴 항목을 어떻게 비활성화 할 수 있습니까?

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> 
); 
} 

이 내가 사이더 함수를 호출 내 주요 클래스입니다.

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을 사용할 수 있습니다. 여기 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, 
}; 

을 codeopen 그리고 문서화를 들어

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으로 이동하십시오.