即使模态尚未打开，mdbreact 模态也会将“模态打开”类应用于正文标记

Question

I am using mdbreact modal in my react application but facing some issue. I try to include the modal component in my page, but the modal is not open yet, inspite of that it is applying a class 'modal-open' to the body tag which stops body from scrolling.

My code is as follows:

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;

The state 'modal' is false still the modal-open class is getting applied. It must get applied only when the state is true. I will be making the state as true on click of an external button in order to show this modal. Any clue?

Answer 1

Each of the imports are MDB(name) ex MDBModal, MDBModalBody. Also for toggling you don't want two functions because your code will get confused. Example of a modal toggle

 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] }) }