модал не работает и отображает пустой экран после нажатия - PullRequest
Новая
       25

модал не работает и отображает пустой экран после нажатия

0 голосов
/ 23 октября 2019

Это работало заранее, но теперь это не помогает, и я не знаю, в чем проблема, все это началось после добавления трех методов в модальный файл. модальный файл находится в js-файле, а родительский компонент - в tsx-файле:

модальный компонент : 

import React, {Component} from 'react'
import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
import {App} from './App'


export class AddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email : "",
            title : "",
            content : ""
        }
    }


    handleEmailChange = e => {
        this.setState({email: e.target.value});
    };
    handleTitleChange = e  => {
        this.setState({title: e.target.value});
    };
    handleContentChange = e => {
        this.setState({content: e.target.value});
    };

    RandomHexString = L => {
        let hexstring = '';
        for (var i = 0; i < L; i++) {
            hexstring += (Math.floor(Math.random() * 16)).toString(16);
        }
        return (hexstring);
    }

    render(){
        let new_ticket = {id:"",title:"",content:"", userEmail:"",creationTime: new Date()};
        return(
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Ticket Details:
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <Form>
                        <Form.Group controlId="exampleForm.ControlInput1" >
                            <Form.Label>Email:</Form.Label>
                            <Form.Control type="email" placeholder="name@example.com" value={this.state.email} onChange={this.handleEmailChange}/>
                        </Form.Group>
                        <Form.Group controlId="exampleForm.ControlInput2">
                            <Form.Label>Title:</Form.Label>
                            <Form.Control type="title" value={this.state.title} onChange={this.handleTitleChange}/>
                        </Form.Group>
                        <Form.Group controlId="exampleForm.ControlTextarea1">
                            <Form.Label>Content:</Form.Label>
                            <Form.Control as="textarea" rows="3" value={this.state.content} onChange={this.handleContentChange}/>
                        </Form.Group>
                    </Form>
                </Modal.Body>
                { new_ticket["id"] = this.RandomHexString(8) + '-' + this.RandomHexString(4) + '-' + this.RandomHexString(4) + '-' + this.RandomHexString(4) + '-' + this.RandomHexString(12)}
                { new_ticket["title"]= this.state.title}
                { new_ticket["content"] = this.state.content}
                { new_ticket["userEmail"] = this.state.email}
                { new_ticket["creationTime"] = new Date()}

                <Modal.Footer>
                    <Button variant="success" onClick={() => this.props.onSubmit(new_ticket)}>Create</Button>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

родительский компонент, вызывающий модальный: 

async HandleInsert(formData : Ticket) {
        this.setState({
            tickets: await api.postTickets(formData)
        })
    }

    addModalClose = () => {
        this.setState( {
            addModalShow : false
        });
    }

    addModalOpen = () => {
        this.setState( {
            addModalShow : true
        });
    }


 <Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
                        {/*define new props for Modal component in parent component*/}
                        <AddModal
                            show={this.state.addModalShow}
                            onHide={this.addModalClose}
                            onSubmit={this.HandleInsert}
                        />

Есть идеи, что я должен попробовать здесь?

...