javascript - 如果登录失败如何验证
问题描述
如果条件正确则重定向到家,但如果条件错误不做任何事情,我希望如果条件错误它会显示从响应 API 填充的警报,例如“STATUS_CODE == '400'”错误的邮件地址或密码
export class Login extends Component {
constructor(props){
super(props)
this.state = {
MEMBER_EMAIL:'',
MEMBER_PASSWORD:'',
device_type:'3',
redirect: false,
loading:false,
error:''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
this.setState({
[e.target.name] : e.target.value
})
}
async handleSubmit(e){
e.preventDefault()
if(this.state.MEMBER_EMAIL && this.state.MEMBER_PASSWORD){
await API.post('member/login', this.state)
.then((response) => {
let responseJson = response
// console.log(responseJson.data)
if(responseJson.data.STATUS_CODE === '200'){
this.props.resSave('data', JSON.stringify(responseJson.data.DATA))
this.setState({
redirect: true
})
}
})
}
}
render() {
if(this.state.redirect){
return <Redirect to='/home' />
}
return (
<Container>
<Padding />
<Row>
<Col md={{ span: 6, offset: 3 }} className='mx-auto'>
<Card>
<CardContent>
<h3><b>Login</b></h3>
<p><b>Welcome back to <i className='text-warning'>privilegez</i></b></p>
<br />
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId='formBasicEmail'>
<Form.Label><b>Email or Username</b></Form.Label>
<Form.Control type='email' name='MEMBER_EMAIL' placeholder='Enter email' onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId='formBasicPassword'>
<Form.Label><b>Password</b></Form.Label>
<Form.Control type='password' name='MEMBER_PASSWORD' placeholder='Password' onChange={this.handleChange} />
</Form.Group>
{/* <Partnership /> */}
<p className='text-muted float-right'><b>Forgot password?</b></p>
<Button type='submit' variant='warning' className='text-white' size='md' block>Login</Button>
</Form>
<br/>
<p className='text-muted text-center'><b>Or</b></p>
<p className='text-primary text-center'><b><i className='fa fa-facebook-official' aria-hidden='true'></i> Login with facebook</b></p>
<br />
<p className='text-muted text-center'><b>Dont have an account <Link to='/register'><span className='text-warning'>Register</span></Link></b></p>
</CardContent>
</Card>
</Col>
</Row>
</Container>
)
}
}
如果条件错误,我已经尝试了几次然后他什么也没做,如果条件错误,如何显示警报
解决方案
onSubmit of Form 会自动刷新你的应用。
为什么不把handleSubmit 函数移到Button 的onClick 事件中。
这是我的建议
async handleSubmit(e){
e.preventDefault()
if(this.state.MEMBER_EMAIL && this.state.MEMBER_PASSWORD){
await API.post('member/login', this.state)
.then((response) => {
let responseJson = response
// console.log(responseJson.data)
if(responseJson.data.STATUS_CODE === '200'){
this.props.resSave('data', JSON.stringify(responseJson.data.DATA))
this.setState({
redirect: true
})
} else if (// your condition // ) {
// you do something here
})
}
}
并从您的 onSubmit 中删除并像这样更改您的 Button
<Button onClick={this.handleSubmit} variant='warning' className='text-white'
size='md' block>Login</Button>
推荐阅读
- arduino - Arduino 运行伺服 N 秒,可能会中断
- java - Spring Boot 应用程序中的 Spring-data-dynamoDB:如果配置了 @EnableDynamoDBAuditing,则 @DynamoDBTable 类不会被识别为持久实体
- java - InteliJ 2018.1 - Java 文件没有运行选项
- android - XMPP 的新用户?
- three.js - Three.js 四元数旋转未正确应用
- c++ - 使用 C++ 获取 Windows 操作系统中的附加设备列表
- json - 在 Python 中从 JSON 文件打印元素
- html - 安排从桌面到智能手机的 DIV 订购
- java - 具有相同自动生成 ID 的两个表
- wcf - 如何将安全标头发送到 WCF 服务