React-Bootstrap trouble w/ButtonGroup ИЛИ где поставить модалы?

Question

В react-bootstrap я пытаюсь создать класс кнопки многократного использования, который будет показывать модальный щелчок. В конечном счете, Modal будет содержать форму «edit», упрощенную для изменения записей «один-много» в таблице/списке.

Здесь я уменьшил проблему до простого диалогового окна «подтвердить», чтобы попытаться получить минимально полный пример.

Проблема, с которой я столкнулся, заключается в том, что встраивание 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 /> внутри <Button /> из <ConfirmActionButton /> и удалить <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>