Как добавить флажок к пунктам меню в reactjs? - PullRequest
Новая
       20

Как добавить флажок к пунктам меню в reactjs?

1 голос
/ 10 марта 2020

Я создаю динамические c меню с использованием рекурсивной функции, и я уже создал меню, и они отображаются в правильном порядке без каких-либо проблем.

Требование:

Здесь мне нужно выяснить последний уровень меню и мне нужно присвоить флажок со значением в качестве соответствующего идентификатора {item.id}.

Например:

Для первого меню один , 

 -> [Checkbox with value as 1.1.1] One-One-One
 -> [Checkbox with value as 1.1.2] One - one - two
 -> [Checkbox with value as 1.1.3] One - one - three

Для второго меню два , 

 -> [Checkbox with value as 2.1] Two - one

.

.

.

Для шестого меню шесть , 

 -> [Checkbox with value as 6] Six

Надеюсь, точка ясна, что мне нужно найти дочерних элементов последнего уровня, как в приведенном выше примере, и они должны установить для него флажок со значением их id.

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

Примечание: флажок должен быть inline с элементами последнего уровня, как в примере показано выше со значением флажка в качестве их соответствующего id.

Цель этого требования состоит в том, что оно будет иметь несколько подменю, а на последнем уровне будут значения фильтра, поэтому при нажатии флажка я передам значение на api и получить соответствующие данные для этого конкретного отмеченного пункта меню и отобразится .. Но здесь мне нужно отображение флажка, соответствующего пункту меню, вот и все. 

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:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - 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} = 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 {...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);
  }

  render() {
    return (
      <Fragment>
        <Button onClick={this.toggle}>{this.props.name}</Button>
        <Collapse isOpen={this.state.isOpen}>
          <MenuItemContainer menuItems={this.props.children} />
        </Collapse>
      </Fragment>
    );
  }

  toggle() {
    this.setState(({isOpen}) => ({isOpen: !isOpen}));
  }
}

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>

1 Ответ

0 голосов
/ 10 марта 2020

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

Ниже приведены изменения, внесенные для добавления флажка. 

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

Вот ссылка plnkr для справки.

Надеюсь, это поможет:)

...