Закрыть выпадающее меню при прокрутке

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