首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >mdbreact modal将一个类‘modal open’应用于body标记,即使该模式尚未打开

mdbreact modal将一个类‘modal open’应用于body标记,即使该模式尚未打开
EN

Stack Overflow用户
提问于 2018-12-04 15:27:34
回答 1查看 205关注 0票数 1

我在react应用程序中使用了mdbreact模式,但遇到了一些问题。我尝试在我的页面中包含body组件,但是body还没有打开,尽管它正在对body标签应用一个‘body open’类来阻止body滚动。

我的代码如下:

代码语言:javascript
复制
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时才能应用。我将使状态为真实的点击一个外部按钮,以显示此模式。有什么线索吗?

EN

回答 1

Stack Overflow用户

发布于 2019-05-17 20:17:41

每个导入都是MDB(名称) ex MDBModal、MDBModalBody。另外,对于切换,你不需要两个函数,因为你的代码会被混淆。模式切换示例

代码语言:javascript
复制
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]
  })
}

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53607743

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档