使用 ReactJS / Reactstrap 的 DropdownMenu 和 DropdownItem onClick

Posted 2023-03-23

【中文标题】使用 ReactJS / Reactstrap 的 DropdownMenu 和 DropdownItem onClick

【英文标题】：DropdownMenu and DropdownItem onClick with ReactJS / Reactstrap

【发布时间】：2019-08-13 13:35:02

【问题描述】：

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

关于它的任何提示？

【问题讨论】：

为了弄清楚这一点，问题是从未调用过 handleClick 并且 console.log('toogle event ref', eventRef);永远不会出现，对吧？

是的，但是我已经使用了这样的 onClick 函数来传递参数并且它可以工作，但是使用这个 dropdownMenu，没有。我猜切换功能会干扰它

【参考方案1】：

我遇到了同样的问题。 我的解决方案如下。

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

【参考方案2】：

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

<DropdownMenu container="body">

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