用打字稿反应模态

Question

我想简单地使用react-modal隐藏和显示Modal，但出现错误，请帮忙！我假设问题在于故事书运行时，没有为带有反应片段和故事书的打字稿指定文档/正文。

这里有解决方法吗？我是否应该避免使用react-modal并在标题中找到另一个库来执行弹出菜单？

未捕获的参考错误：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;