React Bootstrap故障w/ButtonGroup或将模态放在哪里

在react引导程序中，我试图创建一个可重复使用的按钮类，该类在单击时显示模式。最终，Modal将包含一个"编辑"表单，用于修改表/列表中的多个条目之一。

在这里，我将问题简化为一个简单的"确认"对话框，试图获得一个最低限度完整的示例。

我遇到的问题是在ButtonGroup中嵌入与Button内联的Modal会破坏按钮组的格式。具体而言，自定义ConfirmActionButton将显示为独立按钮，而不是组的一部分。

我知道我可以通过将Modal完全移动到ButtonGroup之外来解决布局问题（也许这是正确的做法？），但这似乎没有很好地封装/模块化。

有没有一种方法可以让这个渲染像一个普通的按钮组？或者，重新安排莫代尔人的居住地是唯一真正的前进之路吗？

以下是我在jsfiddle中的示例：

/* A bunch of var 'X = ReactBootstrap.X' lines ommitted here */
var ConfirmActionButton = React.createClass({
  getInitialState : function(){
    return {show : false};
  },
  ok : function(){ 
    this.setState({showModal:false}); 
    this.props.onClick();
  },
  cancel : function(){ 
    this.setState({showModal:false}); 
  },
  show : function(){ 
    this.setState({showModal:true}); 
  },
  render : function() {
    return (
      <span>
        <Button onClick={this.show} >
          {this.props.children}
        </Button>
        <Modal show={this.state.showModal} >
          <ModalHeader>Confirm</ModalHeader>
          <ModalBody>{this.props.confirmMessage}</ModalBody>
          <ModalFooter>
            <Button onClick={this.cancel}>Ok</Button>
            <Button onClick={this.ok}>Ok</Button>
          </ModalFooter>
        </Modal>
      </span>
    );
  }
});
var MyToolbar = React.createClass({
  render: function(){
    return (
      <ButtonToolbar>
        <ButtonGroup>
          <Button>Click Here</Button>
          <Button>No, Here</Button>
          <ConfirmActionButton confirmMessage="Are you sure?" 
                               onClick={this.someAction}
          >
            Do Something
          </ConfirmActionButton>
        </ButtonGroup>
      </ButtonToolbar>
    );
  },
  someAction : function()
  {
    alert("you did it");
  },
});
ReactDOM.render(
    <div>
      <MyToolbar />
    </div>,
    document.getElementById('example')
);