Как открыть одно меню? - PullRequest
Новая
       68

Как открыть одно меню?

1 голос
/ 29 апреля 2020

Я делаю bootstrap гармошку, чтобы свернуть и развернуть меню.

Здесь требование к нагрузке, только родительская кнопка флажка должна быть открыта.

Для которой я использовал приведенный ниже код, 

if(this.props.openMenuId){
       // How to open the ```One``` > ```One-One``` level alone ?
       this.toggle()
    }

Но поскольку все знают, что он откроет все уровни и подуровни.

Согласно моему требованию, я нуждаюсь в чтобы открыть только родительский уровень и их подуровень (и) menuId совпадает и имеет установленное значение флажка (One> One-One), а другие остаются закрытыми.

Чтобы установить флажок проверяется на основе id, переданного в props, я использовал следующее, 

const data = document.getElementById(`menuId-${this.props.openMenuId}`)
            data ? data.checked = true : false;

С помощью этого флажка установлен флажок, но для переключения соответствующего меню подменю сложно для меня.

Я также дал чистый фрагмент кода реакции точно так же, как я попробовал ниже, 

const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five - four"}]},{id:"6",name:"Six"}]);


const {Component, Fragment} = React;
const {Button, Collapse, Input} = Reactstrap;

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {menuItems: []};
  }

  render() {
    return <MenuItemContainer menuItems={this.state.menuItems} />;
  }

  componentDidMount() {
    loadMenu().then(menuItems => this.setState({menuItems}));
  }
}

function MenuItemContainer(props) {
  if (!props.menuItems.length) return null;
  
  const renderMenuItem = menuItem =>
    <li key={menuItem.id}><MenuItem openMenuId = "1.1.2" {...menuItem} /></li>;
    
  return <ul>{props.menuItems.map(renderMenuItem)}</ul>;
}
MenuItemContainer.defaultProps = {menuItems: []};

class MenuItem extends Component {
  constructor(props) {
    super(props);
    this.state = {isOpen: false};
    this.toggle = this.toggle.bind(this);
  }
  
  componentDidMount() {
  const data = document.getElementById(`menuId-${this.props.openMenuId}`)
        data ? data.checked = true : false;
        
    if(this.props.openMenuId){
       // How to open the ```One``` > ```One-One``` level alone
       this.toggle()
    }
  }
  
  toggle() {
    this.setState(({isOpen}) => ({isOpen: !isOpen}));
  }

  render() {
    let isLastChild = this.props.children ? false : true;
    return (
      <Fragment>
        <Button onClick={this.toggle}>{this.props.name}</Button>
        <Fragment>
          {isLastChild ? <Input type="checkbox" id={'menuId-'+this.props.id} value={this.props.id} /> : ''}
        </Fragment>
        <Collapse isOpen={this.state.isOpen}>
          <MenuItemContainer menuItems={this.props.children} />
        </Collapse>
      </Fragment>
    );
  }

}

ReactDOM.render(<Menu />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>
...