Реагируйте на модал с машинописью - PullRequest
Новая
       11

Реагируйте на модал с машинописью

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

Я пытаюсь просто спрятать и показать модал, используя реагирующий модал, но я получаю ошибку, пожалуйста, помогите! Я предполагаю, что проблема в том, что когда работает сборник рассказов, для машинописи не указан документ / тело с фрагментом реакции и сборником рассказов.

Есть ли обходной путь здесь? Должен ли я просто избегать использования Reaction-Modal и найти другую библиотеку для моего всплывающего меню в заголовке?

Uncaught ReferenceError: handleClickOpen не определен 

import React from "react";
import * as ReactModal from 'react-modal';

ReactModal.setAppElement('#root');

export interface BFModalProps {
    className ?: string,
    isOpen?: boolean,
    isClose?: boolean,
    title?: string,
    handleClickOpen?:() => any,
onClick?:() => (event: React.MouseEvent<HTMLElement, MouseEvent>) => void,
    handleClickClose?:() => any,
    disabled?: boolean,
    showCtaButton?: boolean,
    children?: any,
    showModal?: boolean
}


const BFModal: React.FC<BFModalProps> = ({
    showCtaButton = true,
    isOpen = false,
     isClose = true,
}) => {
    const [open, showModal] = React.useState(true);
    const [close, hideModal] = React.useState(false);

    // const showModal = false;

    const handleClickOpen = () => {

        debugger;
       showModal(true);
        isOpen = true;
        debugger
        hideModal(false);
        isClose = false;
        debugger

        console.log('handleClickOpem is clicked');

    };



    const handleClickClose = () => {
        debugger;

        showModal(false);
        debugger;

        isOpen = false;
        console.log('handleClickClose is clicked');
        debugger;

    };



    return (
        <div>
            {
                showCtaButton &&
                <button onClick={handleClickOpen}>Trigger Modal</button>
            }

            <ReactModal
                isOpen={false}
                contentLabel="Inline Styles Modal Example"
                aria={{
                labelledby: "heading",
                describedby: "full_description"
            }}
                style={{
                    overlay: {
                        backgroundColor: 'papayawhip'
                    },
                    content: {
                        color: 'lightsteelblue'
                    }
                }}
            >
                <div>Modal text!</div>
                <button onClick ={handleClickClose} >Close Modal</button>
            </ReactModal>
        </div>
    );
}
export default BFModal;
...