我无法理解 Popover 的定位方式。当我将它添加到按钮时,我希望它出现在按钮下方,但它却出现在页面的左上角:
这是我的按钮组件的代码:
function HeaderLoginButton() {
return (
<div style={{ padding: "15px 0px" }}>
<OverlayTrigger trigger="click" placement="bottom" overlay={ <Login id="headerLogin" /> }>
<a className="login" style={ buttonStyle } onClick={ this.handleClick }>
Log in / sign up
</a>
</OverlayTrigger>
</div>
)
}
这是包装我的弹出窗口的 Login
组件的代码:
function Login( props ) {
return (
<Popover id={ props.id } title={ <LoginTitle /> }>
<div className="form-group row">
<input className="dontHaveAcctCheckbox" type="checkbox" />
<label>I don't have an account, yet</label>
</div>
<div className="form-group row">
<label className="col-sm-3 col-xs-3 control-label">Email: </label>
<input type="email" className="email col-sm-8 col-xs-8" />
</div>
<div className="form-group row">
<label className="col-sm-3 col-xs-3 control-label">Password: </label>
<input type="password" className="password col-sm-8 col-xs-8" />
</div>
<button type="button" className="loginButton btn btn-default">
Login
</button>
<button
type="button"
className="createAcctButton btn btn-default"
style={{ display: "none" }}>
Create Account
</button>
</Popover>
)
}
编辑:问题似乎是我将弹出框包装在 Login
组件中。如果我将 Popover
定义为 HeaderLoginComponent 内的 const
,它似乎可以很好地定位自己。
有人知道为什么会这样吗?
最佳答案
是的,正如他已经说过缺少 Prop 一样,代码应该如下所示,以防有人不确定将 Prop 传递到哪里:
function Login( props ) {
return (
<Popover id={ props.id } title={ <LoginTitle /> } {...props}>
<div className="form-group row">
<input className="dontHaveAcctCheckbox" type="checkbox" />
<label>I don't have an account, yet</label>
</div>
<div className="form-group row"
//rest of the code...
关于reactjs - React-bootstrap 弹出窗口 : Not positioned where I expect it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38624923/