javascript - 仅在经过身份验证时关闭模态

Question

为了创建交易，用户必须首先在确认对话框模式中进行身份验证（密码）。一旦用户通过身份验证，模式就会关闭并显示交易。如果用户未正确验证，则模式仍会关闭，并显示带有错误的 toast 消息。我想更改此逻辑，以便用户在尝试未通过身份验证时必须重新输入密码。

在 createTransaction 中设置状态是以异步方式完成的。newTransactionModal 中的 this.closeModal 是导致模式关闭和状态重置的原因。

NewTransactionModal.js

this.state.showConfirmDialog ? (
                        <ConfirmDialog
                            type="New Transaction"
                            onPasswordChange={this.changePassword}
                            onConfirm={this.handleCreateClick}
                            onCancel={this.handleClose}
                            errMsg = {this.props.passwordErrMsg}
                        />
                    ) : null

NewTransactionModal.js

handleCreateClick = () => {
        if (this.formIsValid()) {        
            let path = '/transaction',
                transaction = {
                    type: this.state.transactionType.id,
                    amount: this.state.transactionAmount,
                    internalComment: this.state.comment,
                    userPassword: this.state.password
                },
                extraDataForError = {
                    typeName: this.state.transactionType.name,
                    advertiserName: this.state.advertiser.name,
                    fundingType: this.state.advertiser.fundingType,
                    financialDocumentId: this.state.documentId,
                    financialDocumentType: this.state.document && this.state.document.documentMetadata.documentType
                };

            if (this.state.transactionType.creditType) {
                path += '/transfer';
                transaction.debitAdvertiserId = this.state.advertiserId;
                transaction.creditAdvertiserId = this.state.transferAdvertiserId;
                transaction.debitFinancialDocumentId = this.state.documentId;
                transaction.creditFinancialDocumentId = this.state.documentId;
            } else {
                transaction.advertiserId = this.state.advertiserId;
                transaction.financialDocumentId = this.state.documentId;
            }

            this.props.createTransaction(path, transaction, extraDataForError);                

            this.closeModal();

        }
    };

ListTransaction.js

createTransaction = (path, data, extra) => {
        const failureMsg = 'Failed to create transaction';

        if (!path || !data) {
            this.setState({
                toastMessage: failureMsg,
                toastType: 'error'
            });
            return;
        }

        const getErrTransactions = res => {
            return [{ transaction: {...data, ...extra}, validations: res.validations, result: res.result }];
        };

        this.setState({ toastType: 'pending' }, async () => {
            try {
                const res = await ApiService.post(path, data, this.abortController.signal);
                if (res && res.result !== 'FAILURE') {
                    this.setState({
                        toastMessage: 'Transaction created',
                        toastType: 'success',
                        selected: []
                    }, () => this.loadData(1));
                } else if (res) {
                    this.handleError(getErrTransactions(res), failureMsg);
                } else {
                    this.setState({toastType: null})               
                }
            } catch (err) {
                if (err) {
                    if (err.name === 'AbortError') {
                        return false;
                    } else if (err.json) {
                        this.setState({
                            passwordErrMsg: "Please enter a valid password"
                        })
                        const jsonErr = await err.json();
                        this.handleError(jsonErr.result ? getErrTransactions(jsonErr) : jsonErr, failureMsg);
                    } else {
                        this.handleError(err, failureMsg);
                    }
                } else {
                    this.setState({ toastType: null });
                }
            }            
        });
    };

ListTransactions.js

canCreate ? (
                        <NewTransactionModal
                            show={showNewTransactionModal}
                            types={allowedTransactionTypes}
                            createTransaction={this.createTransaction}
                            passwordErrMsg = {this.state.passwordErrMsg}
                            handlePasswordAttempt = {this.handlePasswordAttempt}
                            handleRecent={this.handleRecent}
                            handleClose={this.hideModal}
                        />
                    ) : null

我希望用户在无效尝试后仍必须输入密码，并且模式不会消失。此外，在用户输入正确密码后，模式将关闭。

标签： javascriptreactjsmodal-dialog