Question

我有一个可以正确打开的下拉菜单，您可以单击并将其滚动到右侧部分。我还实现了再次单击该按钮时下拉列表将关闭的方法。

我现在正尝试在菜单外部单击以实现下拉菜单。

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

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

有人可以描述一下React做到这一点的最佳方法吗？

预先感谢

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，而当“取消聚焦”（在外部单击）时将触发onBlur。还需要tabIndex属性/ prop才能使焦点/模糊在非输入类型元素上起作用。而且我认为您误解了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>

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

1 个答案: