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

Question

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>

除非用户在弹出窗口之外单击鼠标，否则我将保持弹出窗口的打开状态。如果用户单击“弹出框”内的鼠标，则即使将鼠标释放在弹出框外，也不应该关闭弹出框。

Answer 1

您可以使用弹出窗口的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>