javascript - 从 react 状态制作下拉菜单

Question

我正在尝试将包含几个单词的状态映射到下面的react-bootstrap下拉菜单，我已经包含了我的尝试

我的状态看起来像“要查看的一些单词”，每个单词之间用空格分隔

我尝试使用 for 循环将项目映射到“ul”元素，但下拉列表根本不显示任何内容。

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>

    );
  }

};

我希望下拉菜单包含我所在州的单词列表，我可以在单击时选择这些单词

Answer 1

你应该避免直接修改 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"/>

示例 Playground :https://stackblitz.com/edit/react-msdpvz

回到问题..

*"我尝试使用 for 循环将项目映射到“ul”元素，但下拉列表根本不显示任何内容。"*

因为您的整个代码都在 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 以查看 dom 修改代码的执行情况。