В настоящее время мой модальный рендеринг ниже моей таблицы после того, как я нажму на кнопку отправить в форме. Раньше я думал, что это проблема CSS, но теперь я вполне уверен, что это проблема с javascript logi c. Я чувствую, что это может быть связано с повторным рендерингом таблицы? Вот соответствующие файлы и снимки экрана для контекста.
Таблица:
import React, { Component } from 'react';
import Table from "react-bootstrap/Table";
import SampleQ from '../components/question.js';
import css from '../scss/style.scss';
import Layout from '../components/layout';
import NavigationBar from "../components/Navbar/index";
export default class extends Component {
constructor(props) {
super(props);
this.state = {
showBackground: false
};
this.showBackground = () => {
this.setState({ showBackground: true });
};
this.hideBackground = () => {
this.setState({ showBackground: false });
}
}
static getInitialProps({query: {categories, questions, answers}}) {
return {postCs: categories, allQs: questions, allAs: answers}
}
createTable = () => {
let table = [];
let cats = [];
for (let i = 0; i < this.props.postCs.length; i++){
cats.push(<th key = {i}>{this.props.postCs[i].title}</th>);
}
table.push(<thead> <tr> {cats} </tr> </thead>);
let index = 0;
// Outer loop to create parent
for (let i = 1; i < 6; i++) {
let children = [];
//Inner loop to create children
for (let j = 1; j < 7; j++) {
children.push(
<td>
<div>
<SampleQ
amount={i}
question={this.props.allQs[(index)].title}
answer={this.props.allAs[(index)].title}
showBackdrop={this.showBackground}
hideBackdrop={this.hideBackground}
/>
</div>
</td>);
index++;
}
//Create the parent and add the children
table.push(<tr>{children}</tr>)
}
return table
};
render() {
let data = this.createTable();
return (
<div>
<Layout showBackground={this.state.showBackground} title="lllll" />
<Table striped bordered hover variant = "dark" className={css.table} hide={true}>
{data}
</Table>
</div>
)
}
}
Вопрос:
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";
import Backdrop from "./backdrop";
import styles from '../scss/backdrop.scss';
import Layout from '../components/layout';
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)
showFeedback: false, // tracks visibility of second modal (the feedback modal)
};
this.handleShow = () => {
// show question and the backdrop when the user clicks a cell on the table
this.setState({ showQuestion: true });
this.props.showBackdrop();
};
this.handleHide = () => {
this.setState({ showQuestion: false });
this.props.hideBackdrop();
};
this.submitForm = event => {
event.preventDefault();
this.props.hideBackdrop(); // take down stars backdrop
this.setState({
showQuestion: false, // close question modal
showFeedback: true, // should open Feedback modal
});
};
this.closeFeedback = () => {
// close Feedback modal and close backdrop so that it goes back to the table
this.setState( { showFeedback: false });
this.props.hideBackdrop();
};
}
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"
backdrop={false}
>
<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}
handleHide={this.closeFeedback}
/>
</>
);
}
}
export default SampleQ;
Обратная связь Модальная (та, которая отображается под таблицей)
import React, { Component } from 'react';
import Modal from 'react-bootstrap/Modal';
import { AiFillCheckCircle } from 'react-icons/ai';
import { IconContext } from 'react-icons';
import styles from '../../scss/modalStyle.scss';
import Button from 'react-bootstrap/Button';
class Feedback extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
show={this.props.showModal}
onHide={this.props.handleHide}
dialogClassName="modal-90w"
aria-labelledby="example-custom-modal-styling-title"
className={styles.modal}
>
<IconContext.Provider
value={{
color: '#fff',
size: '70px',
className: styles.modalConfirmIconBox,
}}
>
<AiFillCheckCircle />
</IconContext.Provider>
<Modal.Body className={styles.modalBody}>
<h4 className={styles.h4}>Congratulations!</h4>
<p className={styles.p}>That was the correct answer.</p>
<Button
className={styles.button}
variant="success"
block
size="lg"
onClick={this.props.handleHide}
>
OK
</Button>
</Modal.Body>
</Modal>
);
}
}
export default Feedback;
