React-Bootstrap 麻烦 w/ButtonGroup 或者放在哪里？

Question

在 react-bootstrap 中，我正在尝试创建一个可重复使用的按钮 class，单击该按钮会显示模式。最终，Modal 将包含一个 "edit" 表单，用于修改 table/list 中的多个条目之一。

在这里，我将问题简化为一个简单的 "confirm" 对话框，以尝试获得一个最基本的完整示例。

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

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

有没有办法让这个渲染像一个普通的按钮组？还是重新安排 Modal 居住的地方是唯一真正的前进方向？

以下是我在 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 /> 中，并删除破坏 btn-grp 布局的 <span>。

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

React-Bootstrap 麻烦 w/ButtonGroup 或者放在哪里？

React-Bootstrap trouble w/ ButtonGroup OR where to put modals?

javascript

twitter-bootstrap

reactjs

react-bootstrap