javascript - 避免在单击内部元素时隐藏下拉菜单 [react-bootstrap]

Question

我想通过单击下拉机器人内部的元素来隐藏它。我正在寻找通过 JQuery 来做到这一点的方法。有没有办法只使用 JavaScript 和react-bootstrap 来做到这一点？

我在 onBlur 上调用以下函数:

hideButtons(e){
    console.log("We here!", e.target.id)
    if(e && e.relatedTarget){
        e.relatedTarget.click();
    }
    this.setState({showAccountButtons: false},()=>{
        console.log(this.state.showAccountButtons)
    });
}  

Answer 1

React-bootstrap 有一个支持回调的 onSelect 。因此，只需在回调中执行您需要执行的操作即可。

https://react-bootstrap.github.io/components/dropdowns/

根据您问题中的可用信息，看起来执行以下操作就足够了。

hideButtons(e){
    this.setState({showAccountButtons: false},()=>{
        console.log(this.state.showAccountButtons)
    });
}

<Dropdown onSelect={hideButtons} .../>

如果不起作用请发表评论，并用更多信息更新您的问题，如果需要，我会更新答案