Question

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

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

这是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;

Answer 1

如果您正在使用{{handleClose，show，children}，props），它将无法让您访问props onClick函数。

因此，要使用道具，只需应用破坏道具的对象即可。现在，您的代码将变成这样……

const Modal = ({ handleClose, show, children,...props})

单击关闭按钮时，为什么我的模态不关闭？

1 个答案: