如何在运行时将条目添加到下拉列表？答案

【问题标题】：How to add entries to dropdown during runtime?如何在运行时将条目添加到下拉列表？
【发布时间】：2021-12-20 20:44:13
【问题描述】：

我正在尝试创建一个下拉列表，显示当前所选项目的名称，其中项目的数量是从本地存储的 json 文件中提取的。我找到了这篇文章：link，但是这是对表单组件的引用，而且对于如何使用当前版本的 react-bootstrap 似乎也已经过时了。

我尝试构造一个字符串并注入该字符串，但这显然不起作用。我找不到任何有关在文档上动态创建许多下拉元素的信息。

import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

import SponsorManager from './SponsorManager';
const sponsorManager = new SponsorManager();

function App() {
  var sponsorIds = sponsorManager.getSponsors();
  var dropdowns = ""
  for (const [key, value] of Object.entries(sponsorIds)) {
    var dropdowntemplate = `<Dropdown.Item href="#/action-1">${value.displayName}</Dropdown.Item>\n`
    dropdowns += dropdowntemplate;
  }

 return (
    <React.Fragment>
      <div>
        <DropdownButton id="dropdown-basic-button" title="Dropdown button">
          {dropdowns}
        </DropdownButton>
      </div>
    </React.Fragment>
  );
}

【问题讨论】：

标签： javascript css reactjs drop-down-menu react-bootstrap

【解决方案1】：

我发现该链接实际上有一个似乎对我有用的答案。使用它，我想出了这个我非常喜欢并被封装的解决方案：

import React from 'react';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

class DynamicDropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: this.props.items[0].displayName,
            items: this.props.items
        };
    }

    changeSelected(selected) {
        this.setState({ selected: selected });
    }

    render() {
        let itemDisplays = this.state.items.map(v => (
            <Dropdown.Item as="button" key={v.id} value={v.id} ><div onClick={(e) => this.changeSelected(e.target.innerText)}>{v.displayName}</div></Dropdown.Item>
        ));

        return (
            <div>
                <DropdownButton id="dropdown-basic-button" title={this.state.selected}>
                    {itemDisplays}
                </DropdownButton>
            </div>
        );
    }
}
export default DynamicDropdown;

【讨论】：