保留下拉菜单，直到单击按钮

Question

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

这是现在的样子：

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

$('.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>

非常感谢您！

Answer 1

我只是指出为什么会发生这种情况，您可以对代码进行一些更新，但是我可以让您随心所欲地找出来：）

首先，只要在设置了元素的元素及其所有子元素上单击鼠标，onClick()就会触发一次。

例如（这只是半伪）

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

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

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

执行此操作的通常方法将包含两个单独的组件：

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

如果将onClick函数放在Button元素上，但让它激活了Dropdown元素，则将解决您的问题：）

我正在尝试尽可能地保持清晰，而不仅仅是为您彻底修复它，如果您需要更多的清晰度，请告诉我！