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>

弹出框的静止位置与单选按钮的位置相同。

如果有人可以帮助我改变我的位置，那么这将很棒。

提前致谢..

Answer 1

你试图使用的positionLeft道具被OverlayTrigger覆盖，你不应该使用它。但是，如果您希望更好地控制Popover元素，我建议您创建自己的popover 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>

您可以像

一样使用它

Xxx xxx = mock(Xxx.class); //use your own class returned by the langDao
when(langDao.finById(1)).thenReturn(xxx);

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

使用react-bootstrap在poptrigger中定位popover

1 个答案: