滚动事件关闭菜单后，导航下拉切换不显示菜单

Question

如果您只单击打开/关闭下拉菜单，我当前的实现工作正常。但是，一旦您通过滚动关闭菜单，一旦您再次打开下拉菜单，该菜单就不会显示，或者在您每次打开它时都会显示。

我的移动导航栏中有同样的 CSSTransition 组件，它运行良好，所以这里唯一的外部因素是我拥有的 <Dropdown> 组件。

有谁知道我如何在不做任何多余工作的情况下解决这个问题？否则我想我将不得不放弃下拉组件并实现我自己的显示/隐藏系统。

import React from 'react';
import { Link } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import Dropdown, {DropdownTrigger, DropdownContent} from 'react-simple-dropdown';

    class Nav extends React.Component {
        constructor() {
            super();
            this.state = { show: false, }

            this.showDropdown = this.showDropdown.bind(this);
            this.closeDropdown = this.closeDropdown.bind(this);
        }


        showDropdown() {
            this.setState({ active: true }, () => {
                document.addEventListener('click', this.closeDropdown);
                window.addEventListener('scroll', this.closeDropdown);
            });
        }

        closeDropdown() {
            this.setState({ active: false }, () => {
                document.removeEventListener('click', this.closeDropdown);
                window.removeEventListener('scroll', this.closeDropdown);
            });
        }

        render() {
            return(
                ...
                <Dropdown className="...">
                    <DropdownTrigger onClick={this.showDropdown} >
                        Dropdown {this.state.active
                        ? <img /> //up arrow
                        : <img /> //down arrow
                    </DropdownTrigger>

                    <DropdownContent className="...">
                        <CSSTransition
                            in={this.state.active}
                            timeout={150}
                            unmountOnExit
                        >
                            <ul>
                                <li><Link ... ></Link></li>
                                <li><Link ... ></Link></li>
                            </ul>
                        </CSSTransition>
                    </DropdownContent>
                </Dropdown>
            );
        }
    }

为了清楚起见，我的下拉图标与该州完美配合。唯一的问题是下拉内容。滚动关闭下拉菜单并再次单击下拉菜单后，图标会发生变化，但不会出现菜单。

Answer 1

我发现<Dropdown> 组件与<CSSTransitions> 有竞争利益。他们都处理隐藏和显示内容，因此消除前者解决了问题。

基本上我用类似样式的<div> 替换了<Dropdown> 标签，并处理了侦听器中任何额外需要的操作（用于在元素外单击和滚动）。

Answer 2

只是为了让您知道我从未使用过 react，但是您是否尝试过在 this.setState 中使用 { active: true/false } 而不是使用 { show: true/false } as { active: false } 可能会禁用它，然后当您单击它时再次它 { active: true } 并且可能只是重新启用它但在您再次单击它之前不会触发它打开？

我希望这能给你一个想法。