如何在reactstrap下拉菜单中设置所选项目?
有下拉列表的示例:https : //reactstrap.github.io/components/dropdowns/
当我在下拉菜单中选择项目时,它不会显示。
***工作解决方案*****
import React from "react"; import {ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap"; import superagent from "superagent"; class BootstrapSelect extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.changeValue = this.changeValue.bind(this); this.state = { actions: [], dropDownValue: 'Select action', dropdownOpen: false }; } toggle(event) { this.setState({ dropdownOpen: !this.state.dropdownOpen }); } changeValue(e) { this.setState({dropDownValue: e.currentTarget.textContent}); let id = e.currentTarget.getAttribute("id"); console.log(id); } componentDidMount() { superagent .get('/getActions') .type('application/json; charset=utf-8') .end(function (err, res) { console.log(res.body); this.setState({actions: res.body}); }.bind(this)); } render() { return ( <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}> <DropdownToggle caret> {this.state.dropDownValue} </DropdownToggle> <DropdownMenu> {this.state.actions.map(e => { return <DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem> })} </DropdownMenu> </ButtonDropdown> ); } } export default BootstrapSelect;
在您的DropDownItem上添加一个onclick(在div内)以更改状态。在点击事件中设置“ dropDownValue”。在您的dropDownToggle中,获取state.dropDownValue。
像这样的东西:
changeValue(e) { this.setState({dropDownValue: e.currentTarget.textContent}) } <DropdownToggle caret> {this.state.dropDownValue} </DropdownToggle> <DropdownItem> <div onClick={this.changeValue}>Another Action</div> </DropdownItem>
当然,不要忘记初始化它并绑定功能以使它起作用。