反应语义 UI 弹出窗口被隐藏，而弹出窗口块"mouse click inside but release outside"

Question

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

我正在使用 React 语义 UI 弹出窗口在 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

您可以使用弹出窗口的流动或固定属性。

<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>