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

Question

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

我的移动导航栏中有这个相同的 CSSTransition 组件，它工作得很好，所以这里唯一的外部因素是我有的 <Dropdown> 组件。

有谁知道我如何在不进行任何额外工作的情况下解决这个问题？否则我想我将不得不放弃下拉组件并实现我自己的 show/hide 系统。

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

只是想让你知道我从未使用过 React，但是你在 this.setState 中尝试过，而不是使用 { active: true/false } 使用 { show: true/false } 因为 { active: false } 可能是禁用它，当你再次点击它之后它会 { active: true } 并且可能只是重新启用它但不会触发它打开直到你再次点击它？

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

Answer 2

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

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

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

Navigation dropdown toggle doesn't show the menu after a scroll event has closed the menu

javascript

listener

css-transitions

reactjs

dropdown