onClick Modal makes entire page disappear

问题

I messed around with some installs and configurations. And now for some reason my code isn't working like it used to. I'm not sure where I messed up. I've included my package.json and my next.config.js. This is how my code was working before: when I clicked on the cell in the table, it popped up the question modal. Then when I clicked submit on the question modal, the question modal would disappear and the feedback modal would pop up. Now when I click submit on the question modal, it just randomly makes the entire page disappear.

I'm on next.js 8.0.4-canary.21 and react 16.8.3. I'm not sure if the problem is with my configuration or my code.

Question Modal:

import React, { Component } from 'react';

import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import UserInput from './userInput.js';
import Feedback from "./feedback/feedback";

class SampleQ extends Component {
    static getInitialProps({query: {amount, question, answer}}) {
        return {specAmt: amount, specQ: question, specA: answer}
    }

    constructor(props) {
        super(props);

        this.state = {
            showQuestion: false, // tracks visibility of first modal (the question modal in this component)
            showFeedback: false // tracks visibility of second modal (the feedback modal in other component)
        };

        this.handleShow = () => {
            this.setState({ showQuestion: true });
        };

        this.handleHide = () => {
            this.setState({ showQuestion: false });
        };

        this.submitForm = (event) => {
            event.preventDefault();

            console.log(this.state.showFeedback);

            this.setState({
                showQuestion: false, // close question modal
                showFeedback: true, // should open Feedback modal
            });
        };

        this.closeFeedback = () => {
            this.setState( { showFeedback: false }); // close Feedback modal
        }
    }

    render() {
        return (
            <>
                <Button variant="outline-danger" size = "lg" onClick={this.handleShow}>
                    $ {this.props.amount}00
                </Button>

                <Modal
                    show={this.state.showQuestion}
                    onHide={this.handleHide}
                    dialogClassName="modal-90w"
                    aria-labelledby="example-custom-modal-styling-title"
                >
                    <Modal.Header closeButton>
                        <Modal.Title id="example-custom-modal-styling-title">
                            Question
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <p>
                            {this.props.question}
                        </p>
                        <div>
                            <UserInput
                                answer={this.props.specA}
                                handleClick={this.submitForm}
                            />
                        </div>
                    </Modal.Body>
                </Modal>
                <Feedback
                    showModal={this.state.showFeedback}
                    onSubmit={this.closeFeedback}
                />
            </>
        );
    }
}

export default SampleQ;

Form for the Question Modal:

import React, { Component } from "react";

import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";

class UserInput extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Form onSubmit={this.props.handleClick}>
                <Form.Group as={Row} controlId="formAnswer">
                    <Form.Label column sm={2}>
                        Answer
                    </Form.Label>
                    <Col sm={10}>
                        <Form.Control type="text" placeholder="Enter Here"/>
                    </Col>
                </Form.Group>
                <div>
                    <Button
                        variant="primary"
                        onClick={this.props.handleClick}
                    >Submit</Button>
                </div>
            </Form>
        );
    }
}

export default UserInput;

Feedback Modal:

import React, { Component } from 'react';
import styles from "../../scss/modalStyle.scss";
import Modal from "react-bootstrap/Modal";
import { AiFillCheckCircle } from 'react-icons/ai';
import { IconContext } from "react-icons";
import Button from "react-bootstrap/Button";

class Feedback extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                show={this.props.showModal}
                onHide={this.props.onSubmit}
                className="Feedback"
            >
            <Modal.Dialog style={[styles.modalDialog, styles.modalConfirm]}>
                <Modal.Body style={styles.modalContent}>
                    <Modal.Body style={styles.modalHeader}>
                        <Modal.Body style={styles.iconBox}>
                            <IconContext.Provider value={{ size: "70px", className: "global-class-name" }}>
                                <div>
                                    <AiFillCheckCircle />
                                </div>
                            </IconContext.Provider>
                        </Modal.Body>
                        <h4 className='mx-auto'>Congratulations!</h4>
                    </Modal.Body>
                    <Modal.Body style={styles.modalBody}>
                        <p className="text-center">That was the correct answer.</p>
                    </Modal.Body>
                    <Modal.Body style={styles.modalFooter}>
                        <Button
                            className="btn btn-success btn-block"
                            data-dismiss="modal"
                            onClick={this.props.onSubmit}
                        >
                            OK
                        </Button>
                    </Modal.Body>
                </Modal.Body>
            </Modal.Dialog>
            </Modal>
        );
    }
}

export default Feedback;

my package.json

{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon server/index.js",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "bootstrap": "^4.3.1",
    "express": "^4.16.4",
    "i": "^0.3.6",
    "jquery": "^3.4.1",
    "mysql": "^2.16.0",
    "next": "^8.0.4-canary.21",
    "node-sass": "^4.13.1",
    "npm": "^6.13.7",
    "react": "^16.8.3",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-dom": "^16.8.3",
    "react-icons": "^3.9.0"
  },
  "devDependencies": {
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "sass-loader": "^8.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.10.3"
  }
}

next.config.js

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
});

回答1:

You need to move this outside of the Modal:

<Feedback
  showModal={this.state.showFeedback}
  handleHide={this.closeFeedback}
/>

for example, right inside the last </> in that file.

The reason is you are closing that modal but then are trying to trigger the Feedback modal to open, which is not possible when the first modal is hidden.

codesandbox

来源：https://stackoverflow.com/questions/60141594/onclick-modal-makes-entire-page-disappear