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>

    );
  }

};

我希望下拉菜单包含来自我所在州的单词列表，我可以选择onclick

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"/>

一个示例游乐场：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修改代码正在执行。

从反应状态制作下拉菜单

1 个答案: