Question

我在我的React应用程序中使用mdbreact模态，但遇到了一些问题。我尝试在页面中包含模式组件，但是模式尚未打开，尽管它对body标签应用了“ modal-open”类，从而阻止了主体的滚动。

我的代码如下：

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时，才必须应用它。我将在单击外部按钮时将状态设为true，以显示此模式。有任何线索吗？

Answer 1

每个导入都是MDB（name），例如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]
  })
}

即使模式尚未打开，mdbreact modal也会对body标签应用“ modal-open”类

1 个答案: