如何使用bootstrap在React中显示模式对话框
如何使用bootstrap在React中显示模式对话框
提问于 2018-06-03 05:49:13
我在一个项目中使用react-16，该项目使用create-react-app和提供样式(无组件)的vanilla bootstrap 4库创建。
有没有人能给我指个例子，在这个例子里，按下一个按钮，我就可以打开一个带有bootstrap风格的模式对话框？
提前谢谢。
回答 1
Stack Overflow用户
发布于 2018-06-03 09:03:55
我有一个使用bootstrap的进度代码，尽管我没有用bootstrap设计我的模式……我实际上正在项目的其余部分中使用它，如下所示：https://codepen.io/manAbl/pen/eKYVpL?editors=1010
我正在使用my：<div id="modal-root"></div>创建模式的实例
我正在创建一个门户，用我的class Modal like-so保持与空洞反应状态树的连接：
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}以及基于状态呈现所述模型：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
};
this.handleModalVisibility = this.handleModalVisibility.bind(this);
}
handleModalVisibility() {
this.setState({ showModal: !this.state.showModal });
}
render() {
const { showModal } = this.state;
return (
<div className="container app-wrapper">
<ListContainer/>
<Button onClick={this.handleModalVisibility} title='Add Recipe' />
{ this.state.showModal ? (
<Modal>
<InputAddRecipe onClick={this.handleModalVisibility} />
</Modal> ) : null }
</div>
)
}
}希望能帮上忙:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50661451
复制相关文章
相似问题