Javascript 使用react bootstrap在OverlyTrigger中定位popover_Javascript_Reactjs_Popover_React Bootstrap

Javascript 使用react bootstrap在OverlyTrigger中定位popover

javascript reactjs

Javascript 使用react bootstrap在OverlyTrigger中定位popover,javascript,reactjs,popover,react-bootstrap,Javascript,Reactjs,Popover,React 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" ty

我的项目的引导。我的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>

<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>

即使使用React引导

positionLeft={400}

这有点像：

<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>

<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的静止位置与单选按钮的位置相同

如果有人能帮我改变我的Popover的位置，那就太好了

提前感谢。

您尝试使用的

positionLeft

道具被

OverlayTrigger

覆盖，您不应该使用它。但是，如果您想要对

Popover

元素进行更好的控制，我建议您创建自己的

Popover组件

，该组件对

positionLeft

和

positionTop

组件执行操作，这些组件由

覆盖组件

传递给它

class CustomPopover extends React.Component {
  render(){

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

类CustomPopover扩展了React.Component{
render（）{
返回(
{this.props.children}
)
}
}

你可以像这样使用它

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


性别：请选择您的性别

github上有一个问题：。查看它。

问题是，您试图使用的

positionLeft

道具被

OverlayTrigger