React Semantic UI Popup 在 Popup 块的“鼠标单击内部但在外部释放”时被隐藏答案

【问题标题】：React Semantic UI Popup was hidden while "mouse click inside but release outside" of Popup blockReact Semantic UI Popup 在 Popup 块的“鼠标单击内部但在外部释放”时被隐藏
【发布时间】：2019-11-20 14:24:58
【问题描述】：

React Semantic UI Popup 在 Popup 块的“鼠标点击内部但在外部释放”时被隐藏。

我正在使用 React Semantic UI Popup 在 React 中创建一个登录弹出组件。我正在使用“点击时触发弹出窗口的事件”。当我试图复制 Popup 块中的内容时，当我的鼠标在弹出框之外释放时，弹出窗口关闭。

import React, { Component } from 'react';
import { Button, Message, Popup, Icon, Menu } from 'semantic-ui-react';

// code inside of render return function
<Popup trigger={<Button icon>LOGIN</Button>}
       on='click'
       className='login-popup'
>
       <div className='popup-main'>
              <Message attached='bottom'>
                        Log In
              </Message>
              <LoginForm
                  {...this.props}
              />
        </div>

        <Message attached='bottom'>
              Don't have account? Signup instead.
        </Message>
</Popup>

我希望保持弹出窗口打开，除非用户在弹出窗口之外单击鼠标。如果用户在弹出框内单击鼠标，则即使在弹出框外释放鼠标，弹出框也不应关闭。

【问题讨论】：

有趣的发现：D。我认为这是图书馆本身的问题。我试过他们的演示，他们也有同样的问题。似乎他们正在监听鼠标以释放弹出窗口
@ducmai 我不确定他们是否设计了这样的库。所以，我没有在他们的 Github 上将此作为问题添加。也许我应该这样做。

标签： javascript reactjs semantic-ui-react

【解决方案1】：

您可以使用 Popup 的 flowing 或 pinned 属性。

<Popup
    trigger={<Button icon>LOGIN</Button>}
    on='click'
    className='login-popup'
    flowing
    >
       <div className='popup-main'>
          <Message attached='bottom'>Log In</Message>
          <LoginForm {...this.props}/>
       </div>

       <Message attached='bottom'>
           Don't have account? Signup instead.
       </Message>
</Popup>

【讨论】：