reactjs - 使用 React-Hooks 进行条件渲染
问题描述
1. 上下文
该代码在注册页面中使用,以便有条件地呈现注册表单或输入确认代码的表单,以便可以确认用户的电子邮件地址。AWS Amplify 用于在用户池中创建用户账户,以及确认电子邮件地址。
2. 问题
任一表单在被调用时均未呈现。
3.所有附加源代码
https://github.com/pimp-my-book/FDWA
4. 代码
import React, { useState } from "react";
import Auth from "@aws-amplify/auth";
import { Button, Form, Container, Col, Row } from "react-bootstrap";
const SignUp = ( ) => {
const [ username, setUsername ] = useState("");
const [ password, setPassword ] = useState("");
const [ confirmationCode, setConfirmationCode ] = useState("");
const [ newUser, setNewUser ] = useState(null);
const handleSubmit = async event => {
event.preventDefault();
try {
const newUser = await Auth.signUp(username, password);
console.log(newUser);
setNewUser(newUser)
}
catch (e) {
alert(e.message)
}
}
const handleConfirmationSubmit = async event => {
event.preventDefault();
try {
await Auth.confirmSignUp(username, confirmationCode);
await Auth.signIn(username, password)
}
catch (e) {
alert(e.message)
}
}
const renderForm = () => {
return(
<Container>
<Row>
<Col>
<div>
Sign Up
</div>
</Col>
</Row>
<Row>
<Form onSubmit={ handleSubmit }>
<Form.Row>
<Form.Group controlId="sign-up-email">
<Form.Label>Email Address</Form.Label>
<Form.Control
type="email"
placeholder="Please enter your email address here..."
value={ username }
onChange = { e => setUsername( e.target.value ) }
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group controlId="sign-up-password">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Please enter your password here..."
value={ password }
onChange = { e => setPassword( e.target.value ) }
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group controlId="sign-up-password">
<Button variant="primary" type="submit">
Submit
</Button>
</Form.Group>
</Form.Row>
</Form>
</Row>
</Container>
);
}
const renderConfirmationForm = () => {
return(
<Container>
<Row>
<Col>
<div>
Confirmation Code
</div>
</Col>
</Row>
<Row>
<Form onSubmit={ handleConfirmationSubmit }>
<Form.Row>
<Form.Group controlId="confirmation-code-input">
<Form.Label>We've sent a Confirmation Code to your Email Address -_-</Form.Label>
<Form.Control
type="text"
placeholder="Please enter your Code here..."
value={ confirmationCode }
onChange={ e => setConfirmationCode( e.target.value ) }
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group controlId="confirmation-code-button">
<Button variant="primary" type="submit">
Confirm Your Code
</Button>
</Form.Group>
</Form.Row>
</Form>
</Row>
</Container>
);
}
return (
<div>
{
newUser === null
? <renderForm/>
: <renderConfirmationForm/>
}
</div>
);
}
export default SignUp
解决方案
使用大写字母作为组件名称
const RenderForm=()=>{....}
const RenderConfirmationForm=()=>{....}
推荐阅读
- c++ - 在 Flutter Desktop 应用程序/插件中调试原生 c++ 代码
- python - 使用 python 和 selenium 抓取网站时找不到元素
- python - 在 python 中将日期从 DD/MM/YYYY HH.mm.ss 转换为 MM-DD-YYYY HH:MM:SS 时出错
- linux - 在 docker-compose 上启动 logstash 时被拒绝权限
- graphql - aws appsync oncreate 订阅不会触发
- ubuntu - 在外部 ssd 上安装 ubuntu 后引导加载程序出现问题
- ios - 我可以为 iOS CastSDK 4.5.0 创建自定义设备选择器吗
- watchkit - 我可以从 watchKit 以编程方式打开相机远程应用程序吗
- python - 使用 Python 在保持比例的同时调整图像大小
- java - 如何在 JavaFX 中将 arrayList 添加到 Tableview