我正在嘗試創建一個顯示當前所選專案名稱的下拉串列，其中專案數量是從本地存盤的 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>
);
}
uj5u.com熱心網友回復：
我發現實際上有一個答案似乎對我有用。使用它，我想出了這個我非常喜歡并封裝的解決方案：
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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352348.html
標籤：javascript css 反应 下拉式菜单 反应引导
上一篇：PHP從按鈕獲取值而不提交
下一篇：如何停止執行直到函式完成