javascript - 使用react-bootstrap在overlaytrigger中弹出框的位置

Question

我的项目的 Bootstrap 。我的 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 的给定位置，那就太好了。

提前致谢..

Answer 1

问题是您尝试使用的 positionLeft 属性已被 OverlayTrigger 覆盖，您不应该使用它。但是，如果您想更好地控制 Popover 元素，我建议您创建自己的 popover 组件，它可以对 positionLeft 和 执行某些操作由 Overlay 组件 传递给它的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 。检查一下。