Реагировать - закрывать выпадающее меню при нажатии на окно

Question

У меня есть раскрывающееся меню, которое открывается правильно, вы можете нажать, и оно прокручивает вас в нужный раздел.Я также реализовал, что при повторном нажатии на кнопку раскрывающийся список закроется.

Я сейчас пытаюсь реализовать, чтобы при щелчке за пределами меню раскрывающийся список также закрывался.

В данный моментЛучшее решение, которое я нашел, - добавить прослушиватель событий щелчка в окне.

Это вызывает проблему, которая заключается в том, что когда вы нажимаете, чтобы открыть раскрывающийся список, он сразу же закрывается.Вот почему я добавил новое состояние, чтобы можно было добавить условие, но оно не работает.

Может кто-нибудь описать, как лучше всего это сделать в 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 необходим для фокусировки / размытия для работы с элементами не входного типа.И я думаю, вы ошибаетесь.Замените 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>