如何在reactstrap Dropdown中设置所选项目?
有下拉列表示例: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;
答案 0 :(得分:11)
在你的DropDownItem上添加一个onclick(在div里面?)来改变你的状态。设置&#34; dropDownValue&#34;来自您的点击事件。 在你的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>
当然,不要忘记启动它并绑定功能以使其工作。
答案 1 :(得分:3)
这里是工作代码的完整示例,可能会对您有所帮助。 使用导入:
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from "reactstrap"
方法:
state = {
currency: '',
dropDownOpen: '',
}
toggle = () => {
this.setState({
dropDownOpen: !this.state.dropDownOpen,
})
}
handleChange = (code) => {
this.setState({
currency: code
})
}
内部
render(){
return(
<ButtonDropdown >
<Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle} >
<DropdownToggle color="primary" caret className="dropdown-toggle">
Select Currency
</DropdownToggle>
<DropdownMenu className="currency-dropdown">
<DropdownItem onClick={() => this.handleChange(USD)} dropDownValue="USD">USD</DropdownItem>
<DropdownItem onClick={() => this.handleChange(EUR)} dropDownValue="EUR">EUR</DropdownItem>
<DropdownItem onClick={() => this.handleChange(INR)} dropDownValue="INR">INR</DropdownItem>
<DropdownItem onClick={() => this.handleChange(AFT)} dropDownValue="AFT">AFT</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonDropdown>
)
您可以更新CSS:
.dropdown-toggle {
margin-top: 36px;
min-width: 300px;
background-color: white;
color: darkslategrey;
}
.currency-dropdown {
max-height: 350px;
overflow-y: scroll;
min-width: 300px;
}
使用{this.state.currency}
时,您将获得选定的值
答案 2 :(得分:1)
与@Nevosis解决方案类似,您可以添加一个值属性,然后在“onChange”事件中获取它:
onDropdownItem_Click = (sender) => {
var icon = sender.currentTarget.querySelector("i");
var newState = {
dropDownValue: sender.currentTarget.getAttribute("dropdownvalue"),
dropDownIcon: !!icon && icon.getAttribute("class")
};
this.setState(newState);
if (!!this.props.onChange) {
this.props.onChange(newState.dropDownValue);
}
}
render = () => (
<Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle} className={'ticket-module-selector ' + this.props.className}>
<DropdownToggle color={this.props.color} caret>
<i className={this.state.dropDownIcon}></i>{this.state.dropDownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="Allotments"><i className="fa fa-plane fa-fw"></i>Allotments</DropdownItem>
<DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="GeoAMS"><i className="fa fa-envelope fa-fw"></i>GeoAMS</DropdownItem>
<DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="QIS"><i className="fa fa-money fa-fw"></i>BSP</DropdownItem>
<DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="QIS"><i className="fa fa-clock-o fa-fw"></i>QIS</DropdownItem>
<DropdownItem onClick={this.onDropdownItem_Click} dropDownValue="NO_SHOW"><i className="fa fa-car fa-fw"></i>NO SHOW</DropdownItem>
</DropdownMenu>
</Dropdown>
}