Я возился с некоторыми установками и конфигурациями. И теперь по какой-то причине мой код работает не так, как раньше. Я не уверен, где я испортил. Я включил свой пакет. json и мой следующий .config. js. Вот как мой код работал раньше: когда я щелкнул ячейку в таблице, всплыло модальное вопрос. Затем, когда я нажал кнопку «Отправить» для модального вопроса, модальный вопрос исчезнет, и появится модальное окно обратной связи. Теперь, когда я нажимаю «Отправить» на вопрос модальный, он просто случайным образом заставляет всю страницу исчезнуть.
Я на следующей. js 8.0.4-canary.21 и реагирую 16.8.3. Я не уверен, что проблема в моей конфигурации или моем коде.
Модальный вопрос:
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;
Форма для модального вопроса:
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 } 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;
мой пакет. 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]",
}
});