问题描述
如何在reactstrap下拉菜单中设置所选项目?
有下拉菜单示例:
当我在下拉菜单中选择项目时,不会显示。
*******************工作解决方案********** *******************
从反应导入React;
从 reactstrap导入{ButtonDropdown,DropdownItem,DropdownMenu,DropdownToggle};
来自 superagent的进口超级代理;
类BootstrapSelect扩展了React.Component {
构造函数(props){
super(props ;;
this.toggle = this.toggle.bind(this);
this.changeValue = this.changeValue.bind(this);
this.state = {
操作:[],
dropDownValue:选择操作,
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插入符号>
{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>
);
}
}
导出默认值BootstrapSelect;
在您的DropDownItem上添加onclick(在div内? )来更改您的状态。在点击事件中设置 dropDownValue。
在您的dropDownToggle中,获取您的state.dropDownValue。
类似这样的东西:
changeValue(e){
this.setState({dropDownValue:e.currentTarget.textContent})
}
< DropdownToggle插入符号>
{this.state.dropDownValue}
< / DropdownToggle>
< DropdownItem>
< div onClick = {this.changeValue}>另一个操作< / div>
< / DropdownItem>
当然,不要忘记初始化它并绑定函数以使其起作用。 / p>
How to set selected item in reactstrap Dropdown?
There is example of dropdown: https://reactstrap.github.io/components/dropdowns/
When I select item in dropdown, it is not displayed.
*******************Working solution*****************************
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;
Add an onclick on your DropDownItem (inside a div ?) to change your state. Set a "dropDownValue" from your click event.In your dropDownToggle, get your state.dropDownValue.
Something like this :
changeValue(e) {
this.setState({dropDownValue: e.currentTarget.textContent})
}
<DropdownToggle caret>
{this.state.dropDownValue}
</DropdownToggle>
<DropdownItem>
<div onClick={this.changeValue}>Another Action</div>
</DropdownItem>
Of course, don't forget to init it and bind the function for your this to work.
这篇关于如何在reactstrap下拉菜单中设置所选项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!