我想要一个具有dropdownItem的dropdownMenu,
当我单击一个项目时,它显示参考项目
但是实际上,当我单击时,什么也没有发生
切换功能:处理下拉菜单
handleClick:应该打印我的事件Ref,但从未抛出过
我做了什么((我自愿删除了一些代码以保持问题的目的,this.props.currentEvents很好地填满了)]
class DefaultHeader extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false,
selectedEvents: "Choose Your Event",
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
handleClick = (eventRef, name) => {
console.log('toogle event ref', eventRef);
this.setState({selectedEvents: name, selectedEventsID: eventRef});
}
render() {
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<ButtonDropdown className="info d-md-down-none" display="lg" mobile isOpen={this.state.dropdownOpen} toggle={this.toggle} style={{marginRight: 10}}>
<DropdownToggle caret>
{this.state.selectedEvents}
</DropdownToggle>
{this.props.currentEvents.map((event, index) =>
<DropdownMenu key={index}>
<DropdownItem onClick={this.handleClick.bind(this,event.eventRef, event.name)}>{event.name}</DropdownItem>
</DropdownMenu>
): (<DropdownMenu>
<DropdownItem>You don't manage any event for the moment</DropdownItem>
</DropdownMenu>)
</React.Fragment>
);
}
}
我已经这样使用过onClick函数,并且可以使用,但是对于dropdownMenu来说,它不起作用,看起来好像从未调用过该函数,或者调用过toggle而不是onClickHandle(),
关于它的任何提示吗?
<DropdownItem onClick={this.handleClick.bind(this,event.eventRef, event.name)}>{event.name}</DropdownItem>
代替
<DropdownItem onClick={() => this.handleClick.bind(this,event.eventRef, event.name)}>{event.name}</DropdownItem>