14

ReactBootstrap はポップオーバー コントロールを提供します。モーダルが機能するのと同じように、ポップオーバーの外側をクリックすると、これが閉じられることを望みます（デフォルトでは、ボックスの外をクリックするだけで閉じられます）。

ReactBootstrap を使用してこれを行う方法はありますか、それともカスタム コードを作成する必要がありますか?

ポップオーバーの JSfiddle: http://jsfiddle.net/226cwe4e/

React.createClass({
    render: function() {
        return <ReactBootstrap.OverlayTrigger trigger="click" placement="bottom" overlay={<ReactBootstrap.Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</ReactBootstrap.Popover>}>
        <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
      </ReactBootstrap.OverlayTrigger>;
    }
});
4

5 に答える 5

2

これはあなたのために働くはずだと思います：

const Hello = () => (
  <ReactBootstrap.OverlayTrigger 
    trigger="focus" 
    placement="bottom" 
    overlay={
      <ReactBootstrap.Popover title="Popover bottom">
        <strong>Holy guacamole!</strong> Check this info.   
      </ReactBootstrap.Popover>
    }
  >
    <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
  </ReactBootstrap.OverlayTrigger>
);

ReactDOM.render(<Hello />, document.getElementById('app'));

ここにjsfiddleがあります

于 2015-03-09T20:01:50.187 に答える