javascript - 滚动时关闭下拉菜单

Question

我目前正在使用 Ant Design 开发一个项目，在一个页面上我有一个下拉菜单。当您单击菜单时，它会打开下拉菜单，但如果您向下滚动，菜单仍会保持打开状态。我希望在用户向下滚动菜单关闭时实现这一点。

我试图实现一个 handleScroll() 函数，以便与提供的 onVisibleChange 一起使用。但是我不确定我应该在函数中添加什么来让它工作。

handleScroll = (e) => {
window.addEventListener('scroll', () => {
console.log('scrolling');
 })
}

<Dropdown onVisibleChange={visible => this.handleScroll( 
console.log(visible)) } trigger={['click']} overlay={
  <Menu>
    <Menu.Item key="1"
      onClick={() => this.scrollTo(this.whyRef)}>
      <Icon icon={u1F427} /> <strong>WHY</strong>
      </Menu.Item>
     </Menu>
   }>
 <Dropdown>

Answer 1

您需要在构造函数中添加事件监听器并自行处理下拉列表的可见性状态。尝试这样的事情:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };

    window.addEventListener("scroll", this.closeMenu);
  }

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

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

  render() {
    return (
      <div>
        <Dropdown
          overlay={menu}
          onVisibleChange={this.toggleMenu}
          visible={this.state.visible}
          trigger={["click"]}
        >
          <a className="ant-dropdown-link" href="#">
            Click me <Icon type="down" />
          </a>
        </Dropdown>
      </div>
    );
  }
}

工作示例:https://codesandbox.io/s/2ovjzwqz9y