Javascript React/Next.js关闭一个模式，同时打开另一个模式

我正在使用Node.js、Express.js、MySQL和Next.js（React框架）构建一个服务器呈现的网站。这个概念基本上是一个危险游戏

目前我从数据库中查询并提取所有问题。然后我制作了一个包含$amounts的表格，表格中的每个单元格都可以单击以显示问题。单击表中的单元格/问题时，将打开一个模式。它说的是问题，然后在下面有一个空间来回答和提交按钮

现在我想做的是，当我点击submit按钮时，带有问题的当前模式应该消失，然后一个新的模式会弹出一个“反馈”，基本上是用复选标记表示正确，或者用x符号表示不正确

但我不知道如何做到以上几点，甚至不知道这是否是一个好办法。我对这个很陌生，所以请帮帮我

这是我到目前为止所拥有的。现在，当我运行此代码时，当我单击submit时，问题模式消失，但反馈模式不会弹出

问题:

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 = () => {
            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}
                            />
                            <Feedback
                                showModal={this.state.showFeedback}
                                onSubmit={this.closeFeedback}
                            />
                        </div>
                    </Modal.Body>
                </Modal>
            </>
        );
    }
}

export default SampleQ;

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;

import React，{Component}来自'React'；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
从“./UserInput.js”导入UserInput；
从“/Feedback/Feedback”导入反馈；
类SampleQ扩展组件{
静态getInitialProps（{query:{amount，question，answer}}）{
返回{specAmt:amount，specQ:question，specA:answer}
}
建造师（道具）{
超级（道具）；
此.state={
showQuestion:false，//跟踪第一个模式（此组件中的问题模式）的可见性
showFeedback:false//跟踪第二个模态（其他组件中的反馈模态）的可见性
};
this.handleShow=（）=>{
this.setState（{showQuestion:true}）；
};
this.handleHide=（）=>{
this.setState（{showQuestion:false}）；
};
this.submitForm=（）=>{
这是我的国家({
showQuestion:false，//关闭问题模式
showFeedback:true，//应打开反馈模式
});
};
this.closeFeedback=（）=>{
this.setState（{showFeedback:false}）；//关闭反馈模式
}
}
render（）{
返回(
${this.props.amount}00
问题:

{this.props.question}

);
}
}
导出默认样本；

问题表格：

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 = () => {
            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}
                            />
                            <Feedback
                                showModal={this.state.showFeedback}
                                onSubmit={this.closeFeedback}
                            />
                        </div>
                    </Modal.Body>
                </Modal>
            </>
        );
    }
}

export default SampleQ;

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;

import React，{Component}来自“React”；
从“react引导/表单”导入表单；
从“反应引导/行”导入行；
从“反应引导/Col”导入Col；
从“反应引导/按钮”导入按钮；
类UserInput扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
答复
提交
);
}
}
导出默认用户输入；

反馈模式：

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;

import React，{Component}来自'React'；
从“../../scss/modalStyle.scss”导入样式；
从“反应引导/模式”导入模式；
从'react icons/ai'导入{AiFillCheckCircle}；
从“反应图标”导入{IconContext}；
从“反应引导/按钮”导入按钮；
类反馈扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
祝贺
这是正确的答案
好啊
);
}
}
导出默认反馈；

处理第二个模态的方法与处理第一个模态的方法相同：

添加一个键到SampleQ状态，并用它跟踪第二个模态的可见性

传递一个处理程序，将可见性更改为

true

到

UserAnswer

，并在单击提交时调用它

---

您不应该在另一个类似这样的模式中打开模式：

{modalOpen？：''}

。SampleQ应在其状态下存储两个模态的可见性。

因此，在SampleQ中，我添加了一个名为showFeedback的键，用于跟踪第二个模态的可见性。我制作了一个名为this.submitForm的处理程序，它将showFeedback的状态设置为true，将showQuestion设置为false。所以这应该打开第二个模态，关闭第一个模态。我将this.submitForm作为道具传递给UserAnswer，并将其命名为handleClick。在UserAnswer的表单标记中，我添加了onSubmit={this.props.handleClick}和包含提交按钮的按钮标记中，我添加了onClick={this.props.handleClick}。现在我对反馈组件在哪里呈现以及如何呈现感到困惑？在这种情况下，您应该将反馈模式放在SampleQ组件中UserAnswer one的旁边。他们应该是兄弟姐妹。我更新了原始帖子以反映