我在react应用程序中使用了mdbreact模式,但遇到了一些问题。我尝试在我的页面中包含body组件,但是body还没有打开,尽管它正在对body标签应用一个‘body open’类来阻止body滚动。
我的代码如下:
import React, { Component } from 'react';
import { Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';
class GroupContainer extends Component {
constructor() {
super();
this.state = {
modal: false,
}
}
renderModal = () => {
this.setState({
modal: true,
})
}
closeModal = () => {
this.setstate({
modal: false,
})
}
render() {
return (
<div>
<Modal isOpen={this.state.modal} toggle={() => this.renderModal()} fullHeight position="bottom">
test
</Modal>
</div>
)
}
};
export default GroupContainer;'modal‘状态为false,但modal-open类仍在应用中。它必须仅在状态为true时才能应用。我将使状态为真实的点击一个外部按钮,以显示此模式。有什么线索吗?
发布于 2019-05-17 20:17:41
每个导入都是MDB(名称) ex MDBModal、MDBModalBody。另外,对于切换,你不需要两个函数,因为你的代码会被混淆。模式切换示例
toggle = () => {
this.setState({
modal: !this.state.modal
})
}
//for multiple modals
//modal1
//modal2
//modal3
toggle = nr => () => {
let modalNumber = 'modal' + nr;
this.setState({
[modalNumber]: !this.state[modalNumber]
})
}
https://stackoverflow.com/questions/53607743
复制相似问题