Question

我正在关注https://blog.kylegalbraith.com/2018/11/29/how-to-easily-customize-the-aws-amplify-authentication-ui/，以创建我的自定义登录组件

但是，当单击登录按钮时，根本没有任何动作。并将url更改为类似

http://localhost:3000/?email=test%40test.com&password=1234ABC_a

我刚刚输入的用户名和密码。

如果删除<form>标记，它将得到“用户名不能为空”

此外，<Authenticator>的子组件无法获取authState，它始终是未定义的。

LoginComponent

class Login extends SignIn {

constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
}
showComponent(theme) {
    return (

                    <div className={styles.loginContainer}>
                         ...

                          <form>
                                 <Input id={"username"}
                                        key={"username"}
                                        name={"username"}
                                        placeholder={"email"}
                                        onChange={this.handleInputChange} />
                                  <Input id={"password"}
                                        key={"password"}
                                        name={"password"}
                                        placeholder={"password"}
                                        onChange={this.handleInputChange}
                                        type={"password"}
                                   />
                                <button onClick={() => super.signIn()}>Login</button>

忘记密码？ super.changeState（“ forgotPassword”）}>点击此处

                                <div className={styles.registerText}>Don't have account yet? <a onClick={() => super.changeState("signUp")}> Register here</a></div>
                            </div>
                        </div>
                    </div>

    )
}
}

应用组件

Amplify.configure({Auth:authConfig});
...
<Authenticator hide={[SignIn]}  >
            <Child />
            <Login />
        </Authenticator>

子组件

const Child = (props)=> {
    if(props.authState == "signedIn"){
        return ...
    }
}

aws-amplify-react自定义用户界面无法正确执行身份验证操作

0 个答案: