在另一个函数打字稿中调用关闭模态函数

Question

我的问题是为什么在填写表格并按下“确认”按钮后，chequeModal 没有关闭？通过在“handleSubmit()”函数中调用“handleChequeModalClose()”，我希望它能关闭模态框。 “关闭”按钮工作正常并关闭了 chequeModal。

import {submitTender} from '../utils';
const ChequeModal = ({
        chequeModalOpen,
        handleChequeModalClose,
        chequeDetails,
        localAmount
    }: ChequeModalProps) => {
        const handleSubmit = (e) => {
            e.preventDefault();
            submitTender({
                ...chequeDetails,

            });
            handleChequeModalClose();
        };
        return ( 
            <Panel overlay title = "Cheque details"
            variant = {
                PanelHeaderVariant.TitleAndCloseButton
            }
            size = {
                PanelSize.Large
            }
            onClose = {
                handleChequeModalClose()
            }
            open = {
                chequeModalOpen
            } >
            <LabelWrapper> Cheque number < /LabelWrapper>  
            <InputWrapper name = "chequeNumber"
            onInput = {
                (e: any) => {
                    setChequeNumberInput(filterDigits(e.target.value));
                }
            }
            value = {
                chequeNumberInput
            }
            onBlur = {
                () => checkError(errorType.chequeNumber)
            }
            errorMessage = {
                chequeNumberError
            }
            /> 
            <Button label = "Confirm"
            id = "confirm-btn"
            data - autofocus onClick = {
                handleSubmit
            }
            /> 
            <Button label = "Cancel"
            variant = {
                ButtonVariant.SecondaryFilled
            }
            onClick = {
                handleChequeModalClose()
            }
            />  
            </Panel>

        }


        ///////CheckoutPage.tsx//////
        const CheckoutPage = ({
                    //...some code here}:CheckoutPageProps) =>{
                    const [chequeModalOpen, setChequeModalOpen] = useState(false);
                    const handleChequeModalClose = () => {
                        setChequeModalOpen(false);
                    };
                    return ( 
                      <ChequeModal chequeModalOpen = {
                            chequeModalOpen
                        }
                        
                        handleChequeModalClose = {
                            () => handleChequeModalClose
                        }
                        localAmount = {
                            keyInAmount
                        }
                        chequeDetails = {
                            chequeDetails
                        } >
                        </ChequeModal>
                    )
                }

如果你们能帮助我，我将不胜感激。

Answer 1

在您的 CheckoutPage 组件中，当您在 ChequeModal 组件中发送关闭函数时，您发送的函数将 return 在调用时引用它：

handleChequeModalClose = {() => handleChequeModalClose}

当您在呈现组件时调用它时，它正在为关闭按钮工作，然后当用户关闭模式时将调用实际的关闭函数。

然而，在您的提交函数中，您正在调用 props 中发送的函数，但从未调用实际的关闭函数。

您应该在 props 中发送对您的函数的直接引用：

handleChequeModalClose = {handleChequeModalClose}

然后在不调用的情况下将其发送到模态框的 onCloseprops:

onClose = {handleChequeModalClose}

在这种情况下，您的提交功能将不必修改，您的模式将成功关闭。

P.S 有关 Whosebug 的后续问题，请使用正确的格式并尝试发送您的代码的工作示例。

在另一个函数打字稿中调用关闭模态函数

calling close modal function inside another function typescript

reactjs

react-typescript