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有一个道具let selectElement = document.getElementById('type') const phoneDiv = document.querySelector('#phone'); selectElement.addEventListener('change', (e) => { if (e.target.value === 'etudiant' && phoneDiv.style.display === '') { phoneDiv.style.display = 'block' } else { phoneDiv.style.display = '' } })，该道具接受回调。因此，只需在回调中做您需要做的事情即可。

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

使用您的问题中的可用信息，看起来下面的操作就足够了。

onSelect

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

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

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

1 个答案: