时间戳

首页 > 解决方案 > 使下拉菜单保持不变，直到单击按钮

html - 使下拉菜单保持不变，直到单击按钮

问题描述

我需要在其中创建一个带有“更改密码”部分的下拉菜单，该下拉菜单应该出现在单击时，让用户更改密码并在再次单击该按钮时关闭。

这是它目前的样子：

网站截图

用户单击弹出窗口后立即关闭，因此用户无法更新密码。我知道这可能是一个愚蠢的问题，但我是编程新手，只是学习..这是我到目前为止得到的：

$('.ui.dropdown')
   .dropdown({
     on: 'click'
})

<div className="ui dropdown link item" tabIndex="0" href="/Account/Profile">Hi {this.props.username}
   <div className="menu">  
      <div className="item">
         <ChangePassword/>
      </div>
   </div>
</div>

非常感谢您！

标签： htmlreactjs

解决方案

我只是指出为什么会发生这种情况，您可以对代码进行一些更新，但我会让您在进行时弄清楚:)

首先，onClick()只要在您设置的元素以及该元素的所有子元素上发生鼠标单击，就会触发：

例如（这只是半伪）

<div onClick={} > <button /> <button /> </div>

在这种情况下，onClick 将在您单击父 div 时触发，该 div 在页面上将包装两个按钮。

如果你设置了点击 ui-dropdown 组件时触发的方法，无论下拉菜单是否打开都会发生这种情况。

执行此操作的通常方法有两个独立的组件：

  1. 按钮（您单击以打开下拉列表的东西）
  2. 下拉菜单

如果您将 onClick 功能放在 Button 元素上，但让它激活 Dropdown 元素，您的问题将得到解决:)

我试图尽可能清楚，而不是直接为您修复它，如果您需要更清楚，请告诉我！

推荐阅读