我可以在 AWS Amplify 注册表单上添加选择输入类型吗？

Question

我有一个使用 AWS 放大的反应项目和用户认知池，我有这样的身份验证设置：

export default withAuthenticator(App, {
  signUpConfig: {
    signUpFields: [
      {
        label: 'Company', key: 'company', required: true, type: 'string',
      },
    ],
  },
});

公司的这个新自定义字段效果很好，但我想添加一个选择输入，文档对此没有太大帮助，所以我想知道是否可能，如果是，该怎么做那。

放大文档

Answer 1

我知道这目前没有太大帮助，如果您已经构建了应用程序的组件、路由和导航，则可能需要大量工作，但我在某处读到（不记得在哪里）它们\正在切换到基于插槽的组件，该组件可以与状态处理功能合并，您可以在此处找到该功能。我建议尽早采用这种新方法，因为 Amplify 似乎正在远离 HOC withAuthenticator。

\n

我正在使用 TypeScript 进行构建，但有一个 JS 实现看起来几乎相同，这里是两者的一些示例（也可以在帖子底部看到）。请注意该<AmplifyAuthenticator>组件，您可以在导出的 中自定义登录/注册组件，该组件现在采用如下App命名约定：AuthStateApp

\n

const AuthStateApp: React.FunctionComponent = () => {\n  const [authState, setAuthState] = React.useState<AuthState>();\n  const [user, setUser] = React.useState<object | undefined>();\n\n  React.useEffect(() => {\n      return onAuthUIStateChange((nextAuthState, authData) => {\n          setAuthState(nextAuthState);\n          setUser(authData)\n      });\n  }, []);\n\n  return authState === AuthState.SignedIn && user ? (\n      <div className="App">\n          <div>Hello, {user.username}</div>\n          <AmplifySignOut />\n      </div>\n  ) : (\n    <AmplifyAuthenticator>\n    <AmplifySignUp\n      slot="sign-up"\n      formFields={[\n        { type: "email", label: \'Email\', placeholder: \'Email\', hint: \'Enter Your Email\', required: true },\n        { type: "password" },\n        { type: "email" }\n      ]}\n    />\n  </AmplifyAuthenticator>\n);\n}\n

\n

从这里的文档

\n

\n

如果您\xe2\x80\x99d 想要自定义身份验证器登录或注册组件中的表单字段，则可以使用 formFields 属性来执行此操作。

\n

\n

有关此自定义的更多详细信息，请参阅amplify-form-field prop 文档和内部FormFieldType接口。

\n

例如：

\n

...\n<AmplifyAuthenticator usernameAlias="email">\n  <AmplifySignUp\n    slot="sign-up"\n    usernameAlias="email"\n    formFields={[\n      {\n        type: "email",\n        label: "Custom Email Label",\n        placeholder: "Custom email placeholder"\n        inputProps: { required: true, autocomplete: "username" },\n      },\n      {\n        type: "password",\n        label: "Custom Password Label",\n        placeholder: "Custom password placeholder",\n        inputProps: { required: true, autocomplete: "new-password" },\n      },\n      {\n        type: "phone_number",\n        label: "Custom Phone Label",\n        placeholder: "Custom phone placeholder",\n      },\n    ]} \n  />\n  <AmplifySignIn slot="sign-in" usernameAlias="email" />\n</AmplifyAuthenticator>\n...\n

\n

产量：

\n

\n

我希望这会有所帮助，我仍在尝试找出注册表单中的自定义认知属性内容，我确信这与自定义调用类似，signUp例如：

\n

await Auth.signUp({\n  username: \'someuser\', password: \'mycoolpassword\',\n  attributes: {\n    email: \'someuser@somedomain.com\', \'custom:favorite_ice_cream\': \'chocolate\'\n  }\n})\n

\n

例子

\n

JS：

\n

import React from \'react\';\nimport \'./App.css\';\nimport Amplify from \'aws-amplify\';\nimport { AmplifyAuthenticator, AmplifySignOut } from \'@aws-amplify/ui-react\';\nimport { AuthState, onAuthUIStateChange } from \'@aws-amplify/ui-components\';\nimport awsconfig from \'./aws-exports\';\n\nAmplify.configure(awsconfig);\n\nconst AuthStateApp = () => {\n    const [authState, setAuthState] = React.useState();\n    const [user, setUser] = React.useState();\n\n    React.useEffect(() => {\n        return onAuthUIStateChange((nextAuthState, authData) => {\n            setAuthState(nextAuthState);\n            setUser(authData)\n        });\n    }, []);\n\n  return authState === AuthState.SignedIn && user ? (\n      <div className="App">\n          <div>Hello, {user.username}</div>\n          <AmplifySignOut />\n      </div>\n    ) : (\n      <AmplifyAuthenticator />\n  );\n}\n\nexport default AuthStateApp;\n

\n

TS：

\n

import React from \'react\';\nimport \'./App.css\';\nimport Amplify from \'aws-amplify\';\nimport { AmplifyAuthenticator, AmplifySignOut } from \'@aws-amplify/ui-react\';\nimport { AuthState, onAuthUIStateChange } from \'@aws-amplify/ui-components\';\nimport awsconfig from \'./aws-exports\';\n\nAmplify.configure(awsconfig);\n\nconst AuthStateApp: React.FunctionComponent = () => {\n    const [authState, setAuthState] = React.useState<AuthState>();\n    const [user, setUser] = React.useState<object | undefined>();\n\n    React.useEffect(() => {\n        return onAuthUIStateChange((nextAuthState, authData) => {\n            setAuthState(nextAuthState);\n            setUser(authData)\n        });\n    }, []);\n\n  return authState === AuthState.SignedIn && user ? (\n      <div className="App">\n          <div>Hello, {user.username}</div>\n          <AmplifySignOut />\n      </div>\n  ) : (\n      <AmplifyAuthenticator />\n  );\n}\n\nexport default AuthStateApp;\n

\n