popover在使用react bootstrap的overlaytrigger中的位置

Question

我的项目的引导程序。我的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引导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 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.看看吧。