Reactjs 反应-单击窗口时关闭下拉菜单

我有一个正确打开的下拉菜单，你可以点击它，它会将你滚动到右边的部分。 我还实现了再次单击按钮，下拉列表将关闭

我现在正试图实现，点击菜单外的下拉菜单也会关闭

目前，我找到的最佳解决方案是在窗口上添加一个click事件监听器

这会导致一个问题，即当您单击打开下拉列表时，它会直接将其关闭。这就是为什么我添加了一个新状态，这样我就可以添加一个条件，但这不起作用

有人能描述一下做这件事的最佳反应方式吗

提前谢谢

class Explore extends Component {

constructor(props){
  super(props)

  this.state = {
    visible: false,
    hide: false
  }

  this.whyRef = React.createRef()
  this.overviewRef = React.createRef()

  window.addEventListener('scroll', this.closeMenu);
  // if(this.state.hide === true) window.addEventListener('click', this.closeMenu);
}

toggleMenu = () => {
  if(!this.state.visible){
    this.setState({ visible: true, hide: true });
  } else {
    this.setState({ visible: false, hide: false});
  }
}

closeMenu = () => {
  this.setState({ visible: false });
}

scrollTo = (ref) => {
  window.scrollBy({
      top:ReactDOM.findDOMNode(ref.current).getBoundingClientRect().top - 200,
      behavior: "smooth"   // Optional, adds animation
  })
}

render() {
  const { visible, hide } = this.state

  return (

      <Dropdown
        visible={visible}
        onClick={this.toggleMenu}
        trigger={['click']} overlay={
        <Menu>
          <Menu.Item key="1"
            onClick={() => this.scrollTo(this.whyRef)}>
            <Icon icon={u1F427} /> <strong>WHY</strong>
          </Menu.Item>
          <Menu.Item key="2" onClick={() => this.scrollTo(this.overviewRef)}>
            <Icon icon={u1F30D} /> 30,000 Feet
          </Menu.Item>
        </Menu>
      }>
      <Button style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}
        size="small">
        <strong className="text-grey clickable">
          <Icon icon={infoCircle} size={14}/> SECTIONS
        </strong>
      </Button>
      </Dropdown>
}                 

类扩展组件{
建造师（道具）{
超级（道具）
此.state={
可见：假，
隐藏：假
}
this.whyRef=React.createRef（）
this.overviewRef=React.createRef（）
window.addEventListener（'scroll'，this.closeMenu）；
//if（this.state.hide==true）window.addEventListener（'click'，this.closeMenu）；
}
切换菜单=（）=>{
如果（！this.state.visible）{
this.setState（{visible:true，hide:true}）；
}否则{
this.setState（{visible:false，hide:false}）；
}
}
关闭菜单=（）=>{
this.setState（{visible:false}）；
}
scrollTo=（ref）=>{
窗口。滚动({
top:ReactDOM.findDOMNode（ref.current）.getBoundingClientRect（）.top-200，
行为：“平滑”//可选，添加动画
})
}
render（）{
const{visible，hide}=this.state
返回(
为什么
this.scrollTo（this.overviewRef）}>
30000英尺
}>

部分

}                 

您可以尝试将

onClick

替换为

onFocus

以打开下拉列表，并添加

onBlur

以关闭下拉列表。

onFocus

将在单击元素时触发，而

onBlur

将在“取消聚焦”（单击外部）时触发。 此外，焦点/模糊处理非输入类型的元素需要

tabIndex

attribute/prop。 我认为你得到的

state

是错误的。用

visible={visible}

替换为

visible={this.state.visible}

当您为它注释掉

eventListener

时，我删除了

trigger={['click']}

代码应该是这样的：

toggleMenu = () => {
 this.setState({ visible: !this.state.visible });
}

....
....

<Dropdown
  visible={this.state.visible}
  onFocus={this.toggleMenu}
  onBlur={this.toggleMenu}
  tabIndex="0"
  overlay={
  ....
  ....
</Dropdown>

toggleMenu=（）=>{
this.setState（{visible:！this.state.visible}）；
}
....
....
我发现我可以选择除下拉列表之外的主体，因此我可以添加一个相关方法来关闭下拉列表。我在构造函数中添加了：
document.body.addEventListener（'click'，this.closeDropdown）；
并添加了一个方法：
closeDropdown=e=>{const noClose='.dropdown'；如果（！e.target.matches（noClose））{this.setState（{visible:false}）；}
但是当点击下拉菜单关闭它时，它仍然是一个错误，它总是会再次打开它。这可能是因为没有正确选择类名。谢谢你的回复。事实上，我正在使用Ant Design作为库，并尝试使用
下拉菜单
组件道具。道具
onVisibleChange
正在重新显示g
onClick
所以我想我不需要它。也需要
触发器={['click]}，它与我注释掉的eventlistener无关。对于
visible`状态，我不需要在解构代码时传递
this.state.visible
=this.state。不知何故，您的代码正在运行，但我不确定这是正确的使用方法，也不使用

Dropdown`component props。事实上，只是删除

trigger={[click]}

正在做这项工作。现在唯一持续存在的小错误是，当你点击按钮打开和关闭下拉菜单时，如果不点击按钮外部，就无法再次打开它，因为它一直处于选中状态。@Fabian抱歉，我不熟悉Ant Design，无法帮助。