создание выпадающего меню из состояния реакции - PullRequest
Новая
       70

создание выпадающего меню из состояния реакции

0 голосов
/ 16 октября 2019

Я пытаюсь сопоставить свое состояние, содержащее несколько слов, с раскрывающимся меню реагирующей начальной загрузки ниже. Я включил свою попытку

мое состояние выглядит как «некоторые слова для просмотра», каждое слово отделено пробелом.

Я попытался отобразить элементы в элемент 'ul' с помощью цикла for, но в раскрывающемся списке ничего не отображается. 


import React, { Component } from 'react';
import '../App.css';
import {Button,InputGroup,Dropdown,DropdownButton,ButtonGroup} from 'react-bootstrap';

export default class BreakPointsDropdown extends Component{

  constructor(props){
    super(props);

  }

  render(props){
    return (
    <Dropdown as={ButtonGroup}>
    <Button variant="outline-dark"onClick={this.props.addBreakPointMode}>Add Breakpoint</Button>

    <Dropdown.Toggle split variant="outline-dark" id="dropdown-split-basic" />

    <Dropdown.Menu id="menulist" onClick={()=>{
      var list = this.props.listOfBreakPoints.split(" ")
      var ul = document.createElement("ul")

        for(let i = 0; i< list.length; i++){
          let li = document.createElement("li")
          li.innerHTML= list[i]
          ul.append(li)
        }
        document.getElementById("menulist").append(ul)
    }}>

    </Dropdown.Menu>
  </Dropdown>

    );
  }

};

Я бы хотел, чтобы раскрывающееся меню содержалосписок слов из моего состояния, которые я могу выбрать onclick

1 Ответ

2 голосов
/ 16 октября 2019

Вы должны избегать непосредственного изменения dom ... если это действительно не требуется. Ваш компонент может быть легко переписан как 

import React, { Component } from 'react';
import {render} from "react-dom";
import {Button,Dropdown,ButtonGroup} from 'react-bootstrap';

export default class BreakPointsDropdown extends Component{
  handleSelect = (value) => {
    alert(value);
    // Do something with the value
  }

  render(){
    return (
    <Dropdown as={ButtonGroup}>
    <Button variant="outline-dark"onClick={this.props.addBreakPointMode}>Add Breakpoint</Button>

    <Dropdown.Toggle split variant="outline-dark" id="dropdown-split-basic" />

    <Dropdown.Menu id="menulist">
        {this.props.listOfBreakPoints.split(" ").map(eachBreakpoint => {
            return (
              <Dropdown.Item
                onClick={() => this.handleSelect(eachBreakpoint)}
                key={eachBreakpoint}
              >
                {eachBreakpoint}
              </Dropdown.Item>
            );
        })}
    </Dropdown.Menu>
  </Dropdown>

);
  }
};

и обработан с помощью 

<BreakPointsDropdown listOfBreakPoints="Hi Hello How are you"/>

Пример игровой площадки: https://stackblitz.com/edit/react-msdpvz

Возвращаясь к вопросу ..

* " Я попытался отобразить элементы в элемент 'ul', используя цикл for, но в раскрывающемся списке ничего не отображается. " *

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

<Dropdown.Menu id="menulist" onClick={()=>{
      var list = this.props.listOfBreakPoints.split(" ")
      var ul = document.createElement("ul")

        for(let i = 0; i< list.length; i++){
          let li = document.createElement("li")
          li.innerHTML= list[i]
          ul.append(li)
        }
        document.getElementById("menulist").append(ul)
    }}>

Попробуйте здесь: https://stackblitz.com/edit/react-ruat5w

Нажмите стрелку выпадающего списка -> Вы должны увидеть пустой div -> Нажмите на пустой div, чтобы увидеть выполнение кода модификации вашего домена.

...