有ButtonGroup的React-Bootstrap麻煩或在哪里放置模態？

Question

在react-bootstrap中 ，我試圖創建一個可重用的按鈕類，在單擊該按鈕類時將顯示一個模式。 最終， Modal將包含一個“編輯”表單，該表單易於修改表/列表中的多個條目。

在這里，我將問題簡化為一個簡單的“確認”對話框，以嘗試獲得一個最低限度的完整示例。

我遇到的麻煩是將Modal內聯與Button一起嵌入ButtonGroup會破壞按鈕組的格式。 具體來說，自定義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')
);

Answer 1

您可以將<Modal />放在<ConfirmActionButton />的<Button /> ，然后刪除<span> ，這會破壞btn-grp布局。

    <Button onClick={this.show} >
      {this.props.children}
      <Modal show={this.state.showModal} >
        <ModalHeader>Confirm</ModalHeader>
        <ModalBody>{this.props.confirmMessage}</ModalBody>
        <ModalFooter>
          <Button onClick={this.cancel}>Cancel</Button>
          <Button onClick={this.ok}>Ok</Button>
        </ModalFooter>
      </Modal>
    </Button>