使用react-bootstrap在poptrigger中定位popover

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 prop被OverlayTrigger覆盖，你不应该使用它。 但是，如果您想要更好地控制Popover元素，我建议您创建自己的popover component ，该组件使用由Overlay component传递给它的positionLeft和positionTop Overlay component 。

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 。 看看这个。