[英]React-Bootstrap trouble w/ ButtonGroup OR where to put modals?
In react-bootstrap , I'm trying to create a reusable button class that will show a modal when clicked. 在react-bootstrap中 ,我试图创建一个可重用的按钮类,在单击该按钮类时将显示一个模式。 Ultimately, the
Modal
will contain an "edit" form simple for modifying one-of-many entries in a table/list. 最终,
Modal
将包含一个“编辑”表单,该表单易于修改表/列表中的多个条目。
Here I've reduced the problem to a simple "confirm" dialog to try to get a minimally complete example. 在这里,我将问题简化为一个简单的“确认”对话框,以尝试获得一个最低限度的完整示例。
The trouble I'm having is embedding a Modal
inline with a Button
within a ButtonGroup
is breaking the formatting for the button group. 我遇到的麻烦是将
Modal
内联与Button
一起嵌入ButtonGroup
会破坏按钮组的格式。 Specifically, the custom ConfirmActionButton
will shown as a stand-alone button, not part of the group. 具体来说,自定义
ConfirmActionButton
将显示为独立按钮,而不是组的一部分。
I know I could solve the layout problem by moving the Modal
outside the ButtonGroup
entirely (and maybe that's the right thing to do?), but that seems less well-encapsulated / modular. 我知道我可以通过将
Modal
完全移到ButtonGroup
之外来解决布局问题(也许这是正确的做法?),但这似乎封装得不好/没有模块化。
Is there a way to make this render like a normal button group? 有没有办法使此渲染像普通按钮组一样? Or is rearranging where the Modal lives the only real way forward?
还是重新安排莫代尔生活的唯一真正途径?
Here's what I have in jsfiddle as an example: 这是我在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')
);
You can just put <Modal />
inside the <Button />
of <ConfirmActionButton />
and remove the <span>
which is breaking the btn-grp
layout. 您可以将
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.