React语义UI弹出窗口在弹出窗口区块的“鼠标点击内部但释放外部”隐藏

Question

React语义UI弹出窗口在弹出窗口区块的“鼠标单击内部但释放外部”时被隐藏。

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

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>