React-bootstrap 弹出窗口:未位于我期望的位置
React-bootstrap Popover: Not positioned where I expect it
我无法理解 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
,它似乎可以很好地定位自己。
有人知道为什么会这样吗?
我没有将道具传递给 Login
组件内的 Popover
。所以 Popover
没有得到 placement
、positionTop
和 positionLeft
的值,OverlayTrigger
试图发送它。
我能够使用 JSX spread 属性将所有道具一起发送,如下所述:
https://facebook.github.io/react/docs/transferring-props.html
是的,正如他已经说过的 props 丢失一样,如果有人不确定将 props 传递到哪里,代码应该是这样的:
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...
不确定它是否与新读者相关,但我得到了这个答案并且提供的解决方案对我不起作用,我不得不使用 React.forwardRef 作为我的自定义弹出窗口的包装器并将 ref 向下传递以及。
所以像这样:
const CustomPopover = React.forwardRef((props, ref) => {
return (
<Popover id='popover-basic' {...props} ref={ref}>
<Popover.Title as='h3'>Popover right</Popover.Title>
<Popover.Content>
And here's some <strong>amazing</strong> content. It's very engaging.
right?
</Popover.Content>
</Popover>
);
});
我无法理解 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
,它似乎可以很好地定位自己。
有人知道为什么会这样吗?
我没有将道具传递给 Login
组件内的 Popover
。所以 Popover
没有得到 placement
、positionTop
和 positionLeft
的值,OverlayTrigger
试图发送它。
我能够使用 JSX spread 属性将所有道具一起发送,如下所述:
https://facebook.github.io/react/docs/transferring-props.html
是的,正如他已经说过的 props 丢失一样,如果有人不确定将 props 传递到哪里,代码应该是这样的:
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...
不确定它是否与新读者相关,但我得到了这个答案并且提供的解决方案对我不起作用,我不得不使用 React.forwardRef 作为我的自定义弹出窗口的包装器并将 ref 向下传递以及。 所以像这样:
const CustomPopover = React.forwardRef((props, ref) => {
return (
<Popover id='popover-basic' {...props} ref={ref}>
<Popover.Title as='h3'>Popover right</Popover.Title>
<Popover.Content>
And here's some <strong>amazing</strong> content. It's very engaging.
right?
</Popover.Content>
</Popover>
);
});