我按下链接项目后，下拉菜单关闭，但它不会重定向我

我按下链接项目后，下拉菜单关闭，但它不会重定向我

实际上，我正在尝试使下拉菜单正常工作，问题是当打开下拉菜单时，它会听到handleclick并再次单击以关闭菜单，当我单击链接到de dropdown中的链接项目时，它应该关闭菜单，但它也应该将我重定向到新路线，下拉菜单即将关闭，而无需重定向我。

这里是下拉菜单的实现，其中handleClick是一个函数，比打开下拉菜单时要关闭它：

export class UserDataPresentation extends React.Component<Props> {
  node: any
  componentDidMount() {
    document.addEventListener('mousedown', this.handleClick, false)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick, false)
  }

  handleClick = (e: { target: any }) => {
    if (!this.node.contains(e.target)) {
      this.props.closeMenuUserModal()
      return
    }
  }

  render() {
    const { openMenuUserModal, closeMenuUserModal, isAvatarUserMenuOpen } = this.props
    return (
      <React.Fragment>
        <div className="user-data-container" ref={isAvatarUserMenuOpen ? (node) => (this.node = node) : null}>
          <div className="text">
            <p>Wolfgang Amadeus</p>
          </div>
          <div className="avatar">
            <img src={avatarPhoto} />
          </div>
          <a href="#" onClick={isAvatarUserMenuOpen ? closeMenuUserModal : openMenuUserModal}>
            <div className="svg2">
              <SVG src={downArrow} cacheGetRequests={true} />
            </div>
          </a>
        </div>
      </React.Fragment>
    )
  }
}

这是链接项所在的下拉组件：

export class UserDataModal extends React.PureComponent<Props> {
  render() {
    const { isActive, logUserOut } = this.props
    return (
      <div className={`user-modal-container ${isActive ? 'is-active' : ''}`}>
        <div className="modal-background" />
        <section>
          <ul>
            <li className="no-margin-top">
              <div>
                <SVG cacheGetRequests={true} src={iconProfile} />
                <a href="/settings/account">Profile</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconSecurity} />
                <a href="/settings/security">Security</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconBank} />
                <a href="/settings/bank-details">Bank Details</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconReferral} />
                <a href="/settings/referrals">Referrals</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconFees} />
                <a href="/settings/fees">Fees</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconRedeemable} />
                <a href="/settings/redemption">Redemption</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconLogout} />
                <a href="#" onClick={logUserOut}>
                  Logout
                </a>
              </div>
            </li>
          </ul>
        </section>
      </div>
    )
  }
}

没有handleclick的链接也可以正常工作，因此它们不是问题。难道这就是handleclick函数上留下的东西，让它在我单击[“ C0”]时可以收听下拉链接项吗？

此外，这是呈现下拉列表的位置：

export class AuthenticatedAppPresentation extends React.PureComponent<Props, State> {
  state = {
    menuMinimisedInTabletViewport: true,
  }

  componentDidMount() {
    this.props.loadCurrencies()
    this.props.loadSymbols()
    this.props.loadFeatureFlags()
    this.props.loadAccountKycDetails()
    this.props.loadCurrencyBoundaries()
    this.props.loadSymbolsThresholdStatus()
  }

  toggleTabletMenu = () => {
    this.setState({ menuMinimisedInTabletViewport: !this.state.menuMinimisedInTabletViewport })
  }

  render() {
    const { isBlockFiatTradingBannerDisplayed, navToVerificationForm, isAvatarUserMenuOpen, logOut } = this.props
    return (
      <React.Fragment>
        <AppNavbar toggleMenu={this.toggleTabletMenu} />
        <UserDataModal isActive={isAvatarUserMenuOpen} logUserOut={logOut} />
        <div className="columns is-marginless is-centered is-mobile full-height">
          <SidebarContentWrapper
            menuMinimisedInTabletViewport={this.state.menuMinimisedInTabletViewport}
            navToVerificationForm={navToVerificationForm}
            isBlockFiatTradingBannerDisplayed={isBlockFiatTradingBannerDisplayed}
            className={`column is-paddingless main ${vaultScreenOpen(location) ? 'main--vault' : ''}`}
          >
            <Toast authenticated={true} />
            <div className="columns is-centered is-marginless">
              <div
                className={`column is-paddingless sidebar-content-wrapper__content is-12-desktop ${
                  this.props.pageFullWidth ? 'is-12-widescreen is-12-fullhd' : 'is-10-widescreen is-10-fullhd'
                } `}
              >
                <Switch>
                  <Route path={routes.accounts.path} component={Wallet} />
                  <Route path={routes.exchange.path} component={ExchangeRoot} />
                  <Route path={routes.debitCard.path} component={DebitCard} />
                  <Route path={routes.wallet.path} component={Vault} />
                  <Route path={routes.settings.path} component={Settings} />
                  <Route path={routes.fundManagement.path} component={FundManagementDashboard} />
                  <Route path={GuestRoutes.accountVerification} component={VerificationPage} />
                  <Redirect to={routes.accounts.path} />
                </Switch>
              </div>
            </div>
          </SidebarContentWrapper>
        </div>
      </React.Fragment>
    )
  }
}

提前谢谢！

回答如下：

[handleClick将首先接收鼠标事件，但是如果您调用closeMenuUserModal隐藏隐藏菜单，则链接将永远不会收到鼠标事件，并且您将不会被重定向]]

我按下链接项目后，下拉菜单关闭，但它不会重定向我

实际上，我正在尝试使下拉菜单正常工作，问题是当打开下拉菜单时，它会听到handleclick并再次单击以关闭菜单，当我单击链接到de dropdown中的链接项目时，它应该关闭菜单，但它也应该将我重定向到新路线，下拉菜单即将关闭，而无需重定向我。

这里是下拉菜单的实现，其中handleClick是一个函数，比打开下拉菜单时要关闭它：

export class UserDataPresentation extends React.Component<Props> {
  node: any
  componentDidMount() {
    document.addEventListener('mousedown', this.handleClick, false)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick, false)
  }

  handleClick = (e: { target: any }) => {
    if (!this.node.contains(e.target)) {
      this.props.closeMenuUserModal()
      return
    }
  }

  render() {
    const { openMenuUserModal, closeMenuUserModal, isAvatarUserMenuOpen } = this.props
    return (
      <React.Fragment>
        <div className="user-data-container" ref={isAvatarUserMenuOpen ? (node) => (this.node = node) : null}>
          <div className="text">
            <p>Wolfgang Amadeus</p>
          </div>
          <div className="avatar">
            <img src={avatarPhoto} />
          </div>
          <a href="#" onClick={isAvatarUserMenuOpen ? closeMenuUserModal : openMenuUserModal}>
            <div className="svg2">
              <SVG src={downArrow} cacheGetRequests={true} />
            </div>
          </a>
        </div>
      </React.Fragment>
    )
  }
}

这是链接项所在的下拉组件：

export class UserDataModal extends React.PureComponent<Props> {
  render() {
    const { isActive, logUserOut } = this.props
    return (
      <div className={`user-modal-container ${isActive ? 'is-active' : ''}`}>
        <div className="modal-background" />
        <section>
          <ul>
            <li className="no-margin-top">
              <div>
                <SVG cacheGetRequests={true} src={iconProfile} />
                <a href="/settings/account">Profile</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconSecurity} />
                <a href="/settings/security">Security</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconBank} />
                <a href="/settings/bank-details">Bank Details</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconReferral} />
                <a href="/settings/referrals">Referrals</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconFees} />
                <a href="/settings/fees">Fees</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconRedeemable} />
                <a href="/settings/redemption">Redemption</a>
              </div>
            </li>
            <li>
              <div>
                <SVG cacheGetRequests={true} src={iconLogout} />
                <a href="#" onClick={logUserOut}>
                  Logout
                </a>
              </div>
            </li>
          </ul>
        </section>
      </div>
    )
  }
}

没有handleclick的链接也可以正常工作，因此它们不是问题。难道这就是handleclick函数上留下的东西，让它在我单击[“ C0”]时可以收听下拉链接项吗？

此外，这是呈现下拉列表的位置：

export class AuthenticatedAppPresentation extends React.PureComponent<Props, State> {
  state = {
    menuMinimisedInTabletViewport: true,
  }

  componentDidMount() {
    this.props.loadCurrencies()
    this.props.loadSymbols()
    this.props.loadFeatureFlags()
    this.props.loadAccountKycDetails()
    this.props.loadCurrencyBoundaries()
    this.props.loadSymbolsThresholdStatus()
  }

  toggleTabletMenu = () => {
    this.setState({ menuMinimisedInTabletViewport: !this.state.menuMinimisedInTabletViewport })
  }

  render() {
    const { isBlockFiatTradingBannerDisplayed, navToVerificationForm, isAvatarUserMenuOpen, logOut } = this.props
    return (
      <React.Fragment>
        <AppNavbar toggleMenu={this.toggleTabletMenu} />
        <UserDataModal isActive={isAvatarUserMenuOpen} logUserOut={logOut} />
        <div className="columns is-marginless is-centered is-mobile full-height">
          <SidebarContentWrapper
            menuMinimisedInTabletViewport={this.state.menuMinimisedInTabletViewport}
            navToVerificationForm={navToVerificationForm}
            isBlockFiatTradingBannerDisplayed={isBlockFiatTradingBannerDisplayed}
            className={`column is-paddingless main ${vaultScreenOpen(location) ? 'main--vault' : ''}`}
          >
            <Toast authenticated={true} />
            <div className="columns is-centered is-marginless">
              <div
                className={`column is-paddingless sidebar-content-wrapper__content is-12-desktop ${
                  this.props.pageFullWidth ? 'is-12-widescreen is-12-fullhd' : 'is-10-widescreen is-10-fullhd'
                } `}
              >
                <Switch>
                  <Route path={routes.accounts.path} component={Wallet} />
                  <Route path={routes.exchange.path} component={ExchangeRoot} />
                  <Route path={routes.debitCard.path} component={DebitCard} />
                  <Route path={routes.wallet.path} component={Vault} />
                  <Route path={routes.settings.path} component={Settings} />
                  <Route path={routes.fundManagement.path} component={FundManagementDashboard} />
                  <Route path={GuestRoutes.accountVerification} component={VerificationPage} />
                  <Redirect to={routes.accounts.path} />
                </Switch>
              </div>
            </div>
          </SidebarContentWrapper>
        </div>
      </React.Fragment>
    )
  }
}

提前谢谢！

回答如下：

[handleClick将首先接收鼠标事件，但是如果您调用closeMenuUserModal隐藏隐藏菜单，则链接将永远不会收到鼠标事件，并且您将不会被重定向]]