onClick Modal 使整个页面消失 [英] onClick Modal makes entire page disappear
本文介绍了onClick Modal 使整个页面消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我搞砸了一些安装和配置.现在由于某种原因，我的代码不像以前那样工作了.我不确定我在哪里搞砸了.我已经包含了我的 package.json 和我的 next.config.js.这就是我的代码之前的工作方式:当我单击表格中的单元格时，它会弹出问题模式.然后当我在问题模式上点击提交时，问题模式会消失，反馈模式会弹出.现在，当我点击问题模式上的提交时，它只是随机地使整个页面消失.
我在 next.js 8.0.4-canary.21 并响应 16.8.3.我不确定问题是出在我的配置还是我的代码上.
问题模态:
import React, { Component } from 'react';从react-bootstrap/Modal"导入模态；从react-bootstrap/Button"导入按钮；从./userInput.js"导入用户输入；从./feedback/feedback"导入反馈；类 SampleQ 扩展组件 {static getInitialProps({query: {amount, question, answer}}) {返回{specAmt:金额，specQ:问题，specA:答案}}构造函数(道具){超级(道具)；this.state = {showQuestion: false,//跟踪第一个模态(该组件中的问题模态)的可见性showFeedback: false//跟踪第二个模态(其他组件中的反馈模态)的可见性};this.handleShow = () =>{this.setState({ showQuestion: true });};this.handleHide = () =>{this.setState({ showQuestion: false });};this.submitForm = (事件) =>{event.preventDefault();控制台日志(this.state.showFeedback)；this.setState({showQuestion: false,//关闭问题模式showFeedback: true,//应该打开反馈模式});};this.closeFeedback = () =>{this.setState( { showFeedback: false });//关闭反馈模式}}使成为() {返回 (<><Button variant="outline-danger" size = "lg" onClick={this.handleShow}>$ {this.props.amount}00</按钮><模态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">问题</Modal.Title></Modal.Header><模态体><p>{this.props.question}</p><div><用户输入答案={this.props.specA}handleClick={this.submitForm}/></Modal.Body></模态><反馈showModal={this.state.showFeedback}onSubmit={this.closeFeedback}/></>);}}导出默认 SampleQ；
问题模态的表格:
import React, { Component } from "react";从react-bootstrap/Form"导入表单；从react-bootstrap/Row"导入行；从react-bootstrap/Col"导入 Col；从react-bootstrap/Button"导入按钮；类 UserInput 扩展组件 {构造函数(道具){超级(道具)；}使成为() {返回 (<Form onSubmit={this.props.handleClick}><Form.Group as={Row} controlId="formAnswer"><Form.Label 列 sm={2}>回答</Form.Label><Col sm={10}><Form.Control type="text" placeholder="Enter Here"/></Col></Form.Group><div><按钮变体=主要"onClick={this.props.handleClick}>提交</按钮></表格>);}}导出默认用户输入；
反馈模式:
import React, { Component } from 'react';从../../scss/modalStyle.scss"导入样式；从react-bootstrap/Modal"导入模态；从'react-icons/ai'导入{AiFillCheckCircle}；import { IconContext } from "react-icons";从react-bootstrap/Button"导入按钮；类反馈扩展组件{构造函数(道具){超级(道具)；}使成为() {返回 (<模态show={this.props.showModal}onHide={this.props.onSubmit}className="反馈"><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/></IconContext.Provider></Modal.Body><h4 className='mx-auto'>恭喜！</h4></Modal.Body><Modal.Body style={styles.modalBody}><p className="text-center">这是正确的答案.</p></Modal.Body><Modal.Body style={styles.modalFooter}><按钮className="btn btn-success btn-block"数据关闭=模态"onClick={this.props.onSubmit}>好的</按钮></Modal.Body></Modal.Body></Modal.Dialog></模态>);}}导出默认反馈；
我的 package.json
<代码>{"name": "你好-下一个","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"dev": "nodemon 服务器/index.js","build": "下一个构建",开始":下次开始"},关键字":[]，作者": ""，"license": "ISC",依赖关系":{"@zeit/next-sass": "^1.0.1","引导程序": "^4.3.1","快递": "^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",反应":^ 16.8.3"，"react-bootstrap": "^1.0.0-beta.9","react-dom": "^16.8.3",反应图标":^3.9.0"},开发依赖":{"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.jsconst withSass = require('@zeit/next-sass');module.exports = withSass({cssModules: 真,cssLoader 选项:{进口装载机:1，localIdentName: "[local]___[hash:base64:5]",}}); 解决方案
你需要把它移到 Modal 之外:
<反馈showModal={this.state.showFeedback}handleHide={this.closeFeedback}/>例如，就在该文件中最后一个 </> 的内部.
原因是您正在关闭该模态，但随后试图触发反馈模态打开，这在第一个模态隐藏时是不可能的.
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]",
}
});
解决方案
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.
这篇关于onClick Modal 使整个页面消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
