如何在运行时向下拉列表添加条目？

Question

我正在尝试创建一个显示当前所选项目名称的下拉列表，其中项目的数量是从本地存储的 json 文件中提取的。我发现了这个 post: ，但是这是对表单组件的引用，而且它在如何使用当前版本的 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>
  );
}

Answer 1

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

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;

如何在运行时向下拉列表添加条目？

How to add entries to dropdown during runtime?

javascript

css

drop-down-menu

reactjs

react-bootstrap