使用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 。 看看這個。