не в состоянии открыть модальный компонент из другого компонента - PullRequest
Новая
       34

не в состоянии открыть модальный компонент из другого компонента

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

Я пытаюсь открыть модальный (расширяет Компонент) из другого компонента (который расширяет React.PureComponent) React.PureComponent.

Я новичок в реагировании и JavaScript, так что, возможно, моя проблема уже заключается в смешенииэти типы компонентов?

и, честно говоря, я использую один компонент в файле TSX, а другой - в файле JS.

может быть, это слишком большая проблема?

суть в том, что после использования этого кода:

Первый компонент внутри Modal.js: 

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


export class AddModal extends Component {
    constructor(props) {
        super(props);
    }

    render(){
        return(
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Modal heading
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Centered Modal</h4>
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                        consectetur ac, vestibulum at eros.
                    </p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

второй компонент, частично соответствующий код 

import React from 'react';
import './App.scss';
import {createApiClient, Ticket} from './api';
import {AddModal} from './Modal'
import {Button} from 'react-bootstrap';

export type AppState = {
    tickets?: Ticket[],
    search: string,
    hidden: number,
    show: boolean,
    see_more : boolean[],
    addModalShow : boolean
}

const api = createApiClient();

export class App extends React.PureComponent<{}, AppState> {
    state: AppState = {
        tickets: [],
        search: '',
        hidden : 0,
        show : false,
        see_more : [],
        addModalShow : false
    };

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

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

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
                <AddModal
                show={this.state.addModalShow}
                onHIde={this.addModalClose}
                />

то, что я получаю после нажатия кнопки, таково: буквально над первым компонентом.

enter image description here

любая идеяв чем здесь проблема?

1 Ответ

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

Это потому, что ваш стиль начальной загрузки CSS не работает !!!

Сначала вам нужно Установить Bootstrap, используя NPM 

npm install --save bootstrap

Теперь импортируйтезагрузите в любом месте вашего проекта (рекомендуется в самом верхнем компоненте) , это работает в моем случае. 

import 'bootstrap/dist/css/bootstrap.css';

CSS Styling начнет работать. :)

Удачного кодирования!

...