使用ReactJS / Reactstrap的DropdownMenu和DropdownItem onClick

Question

我想要一个带有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（），

关于它的任何提示吗？

Answer 1

我遇到了同样的问题。 当你用 DropItem 包裹 DropdownMenu 时，你应该像这样传递容器道具：

<DropdownMenu container="body">

希望这能帮助遇到同样问题的其他人。

Answer 2

我有同样的问题。 我的解决方案如下。

              <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>