使用 react-bootstrap 在覆盖触发器中弹出框的位置答案

【问题标题】：Position of popover in overlaytrigger using react-bootstrap使用 react-bootstrap 在覆盖触发器中弹出框的位置
【发布时间】：2016-11-21 01:21:37
【问题描述】：

我的项目的引导程序。我的 JavaScript 代码如下：

<OverlayTrigger  trigger="click"  placement="right"  overlay={<Popover ><strong>Gender: </strong>Please select your gender</Popover>}>

               <input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable}  />
               </OverlayTrigger>

单击单选按钮为我提供了 Popover，但该 Popover 的位置就在该单选按钮旁边。

我用 CSS 试过了：

.popover .right{
    left: 400px
}

即使使用 React-bootstrap positionLeft={400}

类似于以下内容：

<OverlayTrigger  trigger="click"  placement="right"  overlay={<Popover positionLeft={400} ><strong>Gender: </strong>Please select your gender</Popover>}>

                   <input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable}  />
                   </OverlayTrigger>

仍然弹出框的位置与单选按钮的位置相同。

如果有人可以帮助我改变我的 Popover 给定位置，那就太好了。

提前谢谢..

【问题讨论】：

标签： javascript reactjs popover react-bootstrap

【解决方案1】：

你尝试使用的 positionLeft 属性被 OverlayTrigger 覆盖，你不应该使用它。但是，如果您想更好地控制 Popover 元素，我建议您创建自己的 popover component 来处理由 Overlay component 传递给它的 positionLeft 和 positionTop 组件。

class CustomPopover extends React.Component {
  render(){

    return (
      <ReactBootstrap.Popover {...this.props} positionLeft={400}>
        { this.props.children }
      </ReactBootstrap.Popover>
    )
  }
}

你可以像这样使用它

<Overlay>
  <CustomPopover><strong>Gender: </strong>Please select your gender</CustomPopover>
</Overlay>

这是 github 上的一个问题：https://github.com/react-bootstrap/react-bootstrap/issues/816。看看吧。

【讨论】：