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

关闭滚动条上的下拉菜单

1 个答案: