在窗口上点击关闭时，下拉菜单 - 反应

Question

我有一个正确打开，您可以点击下拉菜单，它滚动你的右侧部分。我还实施了上点击一次按钮的下拉菜单将关闭。

现在我想实现上点击菜单以外的下拉也将关闭。

此刻，我找到了最好的解决办法是在窗口上添加一个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>
}                 

Answer 1

你可以尝试用onClick更换onFocus打开下拉菜单和下拉密切添加onBlur。被点击该元素时onFocus会触发，并且当“unfocusing”（点击外）onBlur将触发。还需要tabIndex属性/丙用于聚焦/模糊到非输入型元件工作。我觉得你越来越state错误。与visible={visible}更换visible={this.state.visible}而且我删除trigger={['click']}，你为它注释掉eventListener。

和代码会是这个样子：

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

....
....

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