语义UI React React弹出窗口未出现

Question

请参阅标题。

代码实际上是

<Popup
trigger={<li id="close"><a>Close</a></li>}
content="Click to close"
basic
/>

是的，当相关项目悬停或单击时，弹出窗口不会出现。当我设置open = {true}时，它不附加到组件（如预期）。有人遇到了这个问题，他们可以建议可能的解决方案吗？

Answer 1

css代码应用于HTML，它使其成为position: relative，它会影响弹出窗口出现的位置 - 它们出现在错误的位置。不幸的是，删除此代码完全破坏了我们的粘页。

希望其他遇到同样问题的人都会看到这一点并意识到他们的错误。

Answer 2

我刚刚重写了您的代码，它有效！但是，如果您想用开放属性控制弹出窗口，则应为其创建一个状态，并用onmouseover函数处理弹出窗口。

例如：您定义一个名为ISPOPOPOPEN的状态，并将其设置为false。

this.state={
isPopupOpen : false
}

然后您通过两种方法处理情况：

handleMouseOver = () => this.setState({ isPopupOpen: true })
handleMouseOut = () => this.setState({ isPopupOpen: false })

最后以这种方式写弹出窗口：

                <Popup 
                trigger={
                    <li 
                    id='close'
                    onMouseOver={this.handleMouseOver}
                    onMouseOut={this.handleMouseOut}
                    >
                        <a>Close</a> 
                    </li>
                }
                content={'click to close'}
                basic
                open={this.state.isPopupOpen}
            />

Answer 3

您需要位置属性

<Popup
trigger={<li id="close"><a>Close</a></li>}
content="Click to close"
basic
position="top left"
/>

Answer 4

如果您使用的是position: fixed或position: relative，请确保您的组件的Z index不到1900年。

弹出窗口具有1900年的Z索引。在我的情况下，我的窗户右上角的窗户为10000。弹出窗口确实呈现，但不可见，因为它是我的浮动窗口后面的。我通过检查页面发现了这一点（我在阅读Alister的答案时就知道了）。