Question

我正在使用AWS Amplify的自定义版本的身份验证组件。例如，这是我的登录表单：

import React from 'react'
import ReactMarkdown from 'react-markdown'
import { SignIn as AmpSignIn } from 'aws-amplify-react'

// Components
import CTA from 'components/CTA'

// Language
import { formLanguage } from 'language'

// Style
import style from './index.module.css'

export class SignIn extends AmpSignIn {
    constructor(props) {
        super(props)

        /* eslint-disable-next-line */
        this._validAuthStates = ['signIn', 'signedOut', 'signedUp']
    }

    showComponent() {
        return (
            <form
                className={ style.Form }
                onSubmit={ event => {
                    event.preventDefault()
                    super.signIn()
                } }
            >
                <fieldset className={ style.Fieldset }>
                    <legend className={ style.Legend }>
                        <ReactMarkdown
                            escapeHtml={ false }
                            source={ formLanguage.titles.signIn }
                        />
                    </legend>

                    <label
                        className={ style.Label }
                        htmlFor="email"
                    >
                        { formLanguage.labels.email }
                        <input
                            autoFocus
                            className={ style.Input }
                            id="email"
                            key="email"
                            name="email"
                            onChange={ this.handleInputChange }
                            type="email"
                        />
                    </label>
                    <label
                        className={ style.Label }
                        htmlFor="password"
                    >
                        { formLanguage.labels.password }
                        <input
                            data-test-password
                            className={ style.Input }
                            name="password"
                            onChange={ this.handleInputChange }
                            type="password"
                        />
                    </label>

                    <CTA
                        noCancel
                        stacked
                        buttonVariant="secondary"
                        error=""
                        isDisabled={ false }
                        isSubmitting={ false }
                        labels={ { ...formLanguage.cta.signIn } }
                        onForgotPassword={
                            () => super.changeState('forgotPassword')
                        }
                        onSetAuthStep={ () => {} }
                        secondaryActions="signIn"
                    />
                </fieldset>
            </form>
        )
    }
}

// export default Form
export default SignIn

我需要能够在用户点击Submit时在表单上显示加载图形，然后在操作完成时显示其图形。我知道they added a loading state到SignIn表单已经有一段时间了，但是看起来其他所有表单都尚未接受同样的处理。我也在使用ForgotPassword和SignOut。 ForgotPassword组件本身是两种形式，在连接缓慢的情况下，提交用户名和呈现第二种形式（在其中输入验证码）之间会有一个尴尬的暂停。

使用这些auth组件的现有props / state，是否有办法知道何时提交表单以及何时收到响应？

提交表单时，AWS Amplify中是否存在“正在加载”或“正在提交”状态？

0 个答案: