语义UI反应弹出窗口未出现

时间:2017-12-06 04:31:24

标签: reactjs semantic-ui

见标题。

代码实际上是

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

是的,当有问题的项目被悬停或点击时,弹出窗口不会出现。当我设置open = {true}时,它没有附加到组件(如预期的那样)。有没有人遇到过这个问题,他们可以建议可能的解决方案吗?

2 个答案:

答案 0 :(得分:0)

我刚刚重写了你的代码并且它有效!但是,如果你想用open属性控制弹出窗口,你应该为它创建一个状态并使用onMouseOver函数处理弹出窗口。

例如: 你定义了一个名为isPopupOpen的状态,默认情况下将其设置为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}
            />

答案 1 :(得分:0)

应用于HTML的CSS代码正在使它的位置:相对影响Popups出现的地方 - 它们正在出现,只是在错误的位置。不幸的是,删除此代码完全破坏了我们的粘性页脚。

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