Question

我正在尝试自定义AWS Amplify Authentication UI。（仅适用于注册页面）

我使用create-react-app创建了React App来测试Amplify，我想更改注册表单。我想要不需要电话号码的注册表单，所以我创建了扩展注册组件的“ MySignUp.jsx”。但是，当我单击“注册”按钮时，未显示我的注册表单。我想知道为什么会这样以及如何解决这个问题。

这是我的App.js

import * as React from "react"
import logo from './logo.svg';
import './App.css';
import awsconfig from './aws-exports';

import Amplify from 'aws-amplify';

import {
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  SignIn,
  VerifyContact,
  withAuthenticator,
} from "aws-amplify-react";
import MySignUp from './MySignUp';

Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default withAuthenticator(App,false, [
  <SignIn />,
  <ConfirmSignIn />,
  <VerifyContact />,
  <MySignUp override={'SignUp'} />,
  <ConfirmSignUp />,
  <ForgotPassword />,
])

这是我的MySignUp.jsx

import React from 'react';

import { Auth } from 'aws-amplify';
import {
    SignUp,
    FormSection,
    SectionHeader,
    SectionBody,
    SectionFooter,
    InputRow,
    ButtonRow,
    Link,
} from 'aws-amplify-react';

export default class MySignUp extends SignUp {

    signUp() {
        const { username, password, email } = this.inputs;
        const param = {
            username: username,
            password: password,
            attributes:{
                email: email,
            }
        }
        Auth.signUp(param)
            .then(() => this.changeState('confirmSignUp', username))
            .catch(err => this.error(err));
    }

    showComponent(theme) {
        const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

        return (
            <FormSection theme={theme}>
                <SectionHeader theme={theme}>{'Sign Up Account'}</SectionHeader>
                <SectionBody theme={theme}>
                <InputRow
                        autoFocus
                        placeholder={'Username'}
                        theme={theme}
                        key="username"
                        name="username"
                        onChange={this.handleInputChange}
                    />
                    <InputRow
                        placeholder={'Password'}
                        theme={theme}
                        type="password"
                        key="password"
                        name="password"
                        onChange={this.handleInputChange}
                    />
                    <InputRow
                        placeholder={'Email'}
                        theme={theme}
                        key="email"
                        name="email"
                        onChange={this.handleInputChange}
                    />
                    <ButtonRow onClick={this.signUp} theme={theme}>
                        {'Sign Up'}
                    </ButtonRow>
                </SectionBody>
                <SectionFooter theme={theme}>
                    <div style={theme.col6}>
                        <Link theme={theme} onClick={() => this.changeState('confirmSignUp')}>
                            {'Confirm a Code'}
                        </Link>
                    </div>
                    <div style={Object.assign({textAlign: 'right'}, theme.col6)}>
                        <Link theme={theme} onClick={() => this.changeState('signIn')}>
                            {'Sign In'}
                        </Link>
                    </div>
                </SectionFooter>
            </FormSection>
        )
    }
}

Answer 1

我也遇到了同样的问题。所以我要做的就是删除它：

const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

让我知道它是否有效

Answer 2

主要原因是为什么要从SignUp类继承，并且在下一个代码块中指定MySignUp组件覆盖SignUp组件时，实际上是在隐藏SignUp组件。

export default withAuthenticator(App,false, [
  <SignIn />,
  <ConfirmSignIn />,
  <VerifyContact />,
  <MySignUp override={'SignUp'} />,
  <ConfirmSignUp />,
  <ForgotPassword />,
])

Authenticator组件的作用是将其包括在要隐藏的组件数组中：https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/Authenticator.tsx#L259

hide = hide.filter(
            component => !props_children.find(child => child.type === component)
        );

有两种选择：

首先是消除@ brian-nguyen提到的那些代码行

    const { hide } = this.props;
        if (hide && hide.includes(SignUp)) { return null; }

第二个是修改它们，使其包含您自己的组件，如下所示：

    const { hide } = this.props;
        if (hide && hide.includes(MySignUp)) { return null; }

我希望这对您有帮助！

用于React的AWS Amplify Authentication Custom UI被隐藏

2 个答案: