我碰壁了，不知道该怎么办。我只是试图关闭我的引导程序模式，但它不会关闭。它可以正常打开，但是不会关闭。我已经尝试了许多方法来纠正此问题，以至于这篇文章上没有足够的空间来列出我的所有尝试。

我在做什么错，我该如何解决？

这是App.js：

import React,{ Component } from 'react';
import Product from './Product';
import { ProductConsumer } from "../context";
import TitleBody from "./TitleBody";
import AboutButton from "./AboutButton";
import AboutButtonmodal from "./AboutButtonmodal";

export default class App extends Component {
    constructor(props) {
        console.log("Props - ",props);
        super(props);
        this.state = {
            modalVisible: false
        };
        this.openmodal = this.openmodal.bind(this);
    }

    openmodal() {
        console.log("Open modal called ",this.state.modalVisible);
        const modalVisible = !this.state.modalVisible;
        this.setState({
            modalVisible
        },console.log(this.state.modalVisible));
    }

    render() {
        let styles = this.state.modalVisible
            ? { display: "block" }
            : { display: "none" };
        return (
            <React.Fragment>
                <div classname="py-5">
                    <div classname="container">
                        <TitleBody name="Welcome to" title="Cruskip"/>
                        <AboutButtonmodal show={this.state.modalVisible} onClick={this.openmodal} style={styles}/>
                        <AboutButton onClick={this.openmodal}/>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

这里是AboutButtonmodal.js：

import React from 'react';
import './AboutButtonmodal.scss';

const Modal = ({ handleclose,show,children},props) => {
    const showHideclassname = show ? "modal display-block" : "modal display-none";

    return(
        <div classname={showHideclassname} style={props.style}>
            <div classname="modal-dialog">
                <div classname="modal-content">
                    <div classname="modal-header">
                        <button
                            type="button"
                            onClick={props.onClick}
                            classname="close"
                        >
                            &times;
                        </button>
                        <h4 classname="modal-title">Modal Header</h4>
                    </div>
                    <div classname="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div classname="modal-footer">
                        <button
                            onClick={props.onClick}
                            type="button"
                            classname="btn btn-default"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Modal;

这里是AboutButton.js：

import React from 'react';
import './AboutButton.scss';

const AboutButton = (props) => {
    return(
        <div classname="row">
            <button classname="about-btn" type="button" onClick={props.onClick}>
                About Us
            </button>
        </div>
    );
};

export default AboutButton;