具有ButtonGroup的React-Bootstrap故障或将模态放在何处？

Question

＆lt; p＆gt;在＆lt; a href =“https://react-bootstrap.github.io/”rel =“nofollow”＆gt; react-bootstrap＆lt; / a＆gt ;,我正在尝试创建一个可重复使用的按钮类点击时会显示一个模态。最终，＆lt; code＆gt; Modal＆lt; / code＆gt;将包含一个简单的“编辑”表单，用于修改表/列表中的多个条目。 ＆LT; / p为H. ＆lt; p＆gt;在这里，我将问题简化为一个简单的“确认”对话框，试图获得最低限度的完整示例。＆lt; / p＆gt; ＆lt; p＆gt;我遇到的麻烦是嵌入＆lt; code＆gt; Modal＆lt; / code＆gt;内联一个＆lt; code＆gt; Button＆lt; / code＆gt;在＆lt; code＆gt; ButtonGroup＆lt; / code＆gt;中正在打破按钮组的格式。具体而言，自定义＆lt; code＆gt; ConfirmActionButton＆lt; / code＆gt;将显示为独立按钮，而不是该组的一部分。＆lt; / p＆gt; ＆lt; p＆gt;我知道我可以通过移动＆lt; code＆gt; Modal＆lt; / code＆gt;来解决布局问题。在＆lt; code＆gt; ButtonGroup＆lt; / code＆gt;之外完全（也许这是正确的事情？），但这似乎没有很好的封装/模块化。＆lt; / p＆gt; ＆lt; p＆gt;有没有办法让这个渲染像普通的按钮组一样？或者重新安排莫代尔居住的唯一真正前进方向？＆lt; / p＆gt; ＆lt; p＆gt;这是我所拥有的＆lt; a href =“https://jsfiddle.net/69z2wepo/26551/"rel =”nofollow“＆gt; jsfiddle＆lt; / a＆gt;例如：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; / *这里省略了一堆var'X = ReactBootstrap.X'行* / var ConfirmActionButton = React.createClass（{   getInitialState：function（）{     return {show：false};   }，   ok：function（）{     this.setState（{的ShowModal：假}）;     this.props.onClick（）;   }，   取消：function（）{     this.setState（{的ShowModal：假}）;   }，   show：function（）{     this.setState（{的ShowModal：真}）;   }，   render：function（）{     回来（       ＆LT;跨度＆GT;         ＆lt; Button onClick = {this.show}＆gt;           {} this.props.children         ＆LT; /按钮＆GT;         ＆lt; Modal show = {this.state.showModal}＆gt;           ＆LT; ModalHeader＆GT;确认＆LT; / ModalHeader＆GT;           ＆LT; ModalBody＆GT; {this.props.confirmMessage}＆LT; / ModalBody＆GT;           ＆LT; ModalFooter＆GT;             ＆lt; Button onClick = {this.cancel}＆gt; Ok＆lt; / Button＆gt;             ＆lt; Button onClick = {this.ok}＆gt; Ok＆lt; / Button＆gt;           ＆LT; / ModalFooter＆GT;         ＆LT; /模态＆GT;       ＆LT; /跨度＆GT;     ）;   } }）; var MyToolbar = React.createClass（{   render：function（）{     回来（       ＆LT; ButtonToolbar＆GT;         ＆LT;＆ButtonGroup的GT;           ＆lt; Button＆gt;点击此处＆lt; / Button＆gt;           ＆lt; Button＆gt;不，这里＆lt; / Button＆gt;           ＆lt; ConfirmActionButton confirmMessage =“你确定吗？”                                的onClick = {this.someAction}           ＆GT;             做一点事           ＆LT; / ConfirmActionButton＆GT;         ＆LT; / ButtonGroup的＆GT;       ＆LT; / ButtonToolbar＆GT;     ）;   }，   someAction：function（）   {     警报（“你做到了”）;   }， }）; ReactDOM.render（     ＆LT; DIV＆GT;       ＆lt; MyToolbar /＆gt;     ＆LT; / DIV＆gt;中     的document.getElementById（ '例如'） ）; ＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 1

您可以将<Modal />放在<Button />的{​​{1}}内，然后移除违反<ConfirmActionButton />布局的<span>。

btn-grp