我在一个项目中使用react-16,该项目使用create-react-app
和提供样式(无组件)的vanilla bootstrap 4库创建。
有没有人能给我指个例子,在这个例子里,按下一个按钮,我就可以打开一个带有bootstrap风格的模式对话框?
提前谢谢。
发布于 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>
)
}
}
希望能帮上忙:)
https://stackoverflow.com/questions/50661451
复制相似问题