Как я могу отключить элемент подменю в реакции?

Я создаю меню с 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,
};

reactjs antd
person willywonka15    schedule 19.11.2017    source источник
comment
Подменю должно быть активным, когда вы нажимаете на него. Правильный?   -  person Elumalai Kaliyaperumal    schedule 19.11.2017
comment
да, правильно, а затем это подменю закрылось, чтобы открыть другое подменю @elumalai_kp   -  person willywonka15    schedule 19.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать 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>
  );
}

Для документации, пожалуйста, прочитайте горизонтальное меню и Вертикальное меню

person Elumalai Kaliyaperumal    schedule 19.11.2017
comment
Я не понимаю, где я должен разместить handleClick в своем коде? У меня есть класс App и класс Sider. В вашем коде они оба в одном классе - person willywonka15; 19.11.2017
comment
Вы, вероятно, должны разместить onclick в меню. Я предположил само меню как приложение. Или передайте onclick и состояние в качестве реквизита вашей функции sider в вашем сценарии. Надеюсь, вы получите представление! - person Elumalai Kaliyaperumal; 19.11.2017
comment
@ willywonka15 - Посмотрите обновленный ответ, и вы поймете, как это сделать! - person Elumalai Kaliyaperumal; 19.11.2017
comment
Большое спасибо. Я вижу ваш обновленный ответ, он мне помогает, но проблема все еще есть, и я не могу, как я могу ее понять? Не могли бы вы увидеть мой обновленный ответ, пожалуйста? - person willywonka15; 19.11.2017
comment
Проблема в том, что в Sider.js есть предупреждение: в handleClick отсутствует проверка реквизита. - person willywonka15; 19.11.2017
comment
Вы получаете current поддержку в Sider.js? - person Elumalai Kaliyaperumal; 19.11.2017
comment
Я использовал его, но открывается то же предупреждение. - person willywonka15; 19.11.2017
comment
Пожалуйста, просмотрите этот codepen, выполненный с помощью функции Sidebar, как и вы, и вы не увидели никаких предупреждений codepen.io/elumalaiit /pen/NwXLxa. - person Elumalai Kaliyaperumal; 19.11.2017
comment
Причина предупреждения должна заключаться в том, что я добавляю реквизиты в Main.js, а не в App.js? - person willywonka15; 19.11.2017
comment
@willywonka15 — Вы не можете получить доступ как React.PropTypes.func в React 16. Так что импортируйте пакет prop-types и используйте его как PropTypes.func, и все будет работать! - person Elumalai Kaliyaperumal; 19.11.2017

arrow_upward
0
arrow_downward

Как вы реализовали механизм зависания? Пожалуйста, добавьте больше кода. Вы меняете внутреннее состояние каждого подменю, когда наводите курсор?

Вам лучше прочитать документацию по компонентам antd. Перейдите по следующей ссылке, чтобы лучше понять, как использовать эти компоненты.

person Gilad Bar    schedule 19.11.2017
comment
Нет, я не делал, как я могу это сделать? - person willywonka15; 19.11.2017
comment
Мне нужно увидеть больше кода, вы создали компоненты Menu, SubMenu или вы импортируете их из третьей стороны? - person Gilad Bar; 19.11.2017
comment
Я добавляю свою функцию рендеринга. - person willywonka15; 19.11.2017
comment
Я отредактировал ответ, попробуйте использовать прикрепленную ссылку. - person Gilad Bar; 19.11.2017
comment
Я читал, но мое меню немного отличается от этой ссылки. Должен ли я добавить mountMode ? Какой из них закрывает пункты подменю? - person willywonka15; 19.11.2017
comment
Похоже, вы должны использовать внутреннее состояние, чтобы определить, какое подменю открыто в данный момент. Когда вы открываете другое подменю, вы должны изменить текущее подменю, и таким образом будет открыто только текущее подменю. - person Gilad Bar; 19.11.2017
comment
Хорошо, я понимаю, но я этого не делал :/ Я добавляю функцию handleClick для установки состояния, но она не работает - person willywonka15; 19.11.2017