[英]How to Route User After Form Validation In React?
I'm New To React And Trying To make SignUp SignIn Project.我是新来的反应并试图制作注册登录项目。
I'm Trying To Route User To Login / SignIn Page If From Validation Success.如果验证成功,我正在尝试将用户路由到登录/登录页面。
this is my SignUp code.这是我的注册码。
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios';
const initianValue = {
username: '',
password: '',
nameError: '',
passError: '',
dataError: '',
};
class SignUp extends Component {
constructor(props) {
super(props);
this.state = initianValue;
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
validForm() {
let nameError = '';
let passError = '';
let dataError = '';
const user = {
username: this.state.username,
password: this.state.password,
};
if (!this.state.username) {
nameError = 'Enter Name';
}
if (user.username !== '' && user.password !== '') {
Axios.post('http://localhost:9000/checkUser', user)
.then((res) => this.setState({ dataError: res.data }))
.catch((err) => console.log(err));
}
if (!this.state.password) {
passError = 'Enter Password';
}
if (nameError || passError || dataError) {
this.setState({
nameError,
passError,
dataError,
});
return false;
}
return true;
}
handleSubmit = (e) => {
e.preventDefault();
const isvalid = this.validForm();
if (isvalid) {
this.setState(initianValue, () => this.props.history.push('/Signin'));
}
};
render() {
return (
<div className='Main'>
<span className='create'>Create Account</span>
<div className='SignUp'>
<form onSubmit={this.handleSubmit}>
<div className='form-group'>
<label>Username</label>
<input
type='text'
name='username'
value={this.state.username}
className='form-control'
onChange={this.handleInputChange}
/>
<div className='error'>
{this.state.nameError}
{this.state.dataError}
</div>
<br />
<label>Password</label>
<input
type='password'
name='password'
value={this.state.password}
className='form-control'
onChange={this.handleInputChange}
/>
<div className='error'>{this.state.passError}</div>
<br />
<button type='submit' className='btn btn-primary'>
Sign Up
</button>
</div>
</form>
</div>
<div className='signinForm'>
<label>
Already Have Account <Link to='/Signin'> Sign In </Link>
</label>
</div>
</div>
);
}
}
export default SignUp;
This Is SignUp From And After Completing this From If No Errors I want To Send User to SignIn Page Or Next Page.这是注册自并在完成后从如果没有错误我想将用户发送到登录页面或下一页。
Should I Use Redux?我应该使用 Redux 吗?
How Can I Do That?我怎样才能做到这一点?
Assuming your SignUp
component is wrapped inside Router
your component should already have access to history
using `props.假设您的SignUp
组件包装在Router
中,您的组件应该已经可以使用 ` history
.
So you can simply do this this.props.history.push
.所以你可以简单地这样做this.props.history.push
。 Use the 2nd arg in setState
which is a fun which gets executed after setting state (as setState is async)使用setState
中的第二个参数,这很有趣,在设置 state 后执行(因为 setState 是异步的)
Like this像这样
handleSubmit = (e) => {
e.preventDefault();
const isvalid = this.validForm();
if (isvalid) {
this.setState(initianValue, () => this.props.history.push("/dashboard"));//<----- like this
}
};
If your SignUp
component is not inside of Router
then you can use withRouter .如果您的SignUp
组件不在Router
内部,那么您可以使用withRouter 。 Just pass Signup
to withRouter hoc.只需将Signup
传递给 withRouter hoc。
We can use <Redirect/>
component form react-router-dom to redirect the page in the following way我们可以使用<Redirect/>
组件形式 react-router-dom 以如下方式重定向页面
import { Redirect } from 'react-router-dom'
handleSubmit = (e) => {
e.preventDefault();
const isvalid = this.validForm();
if (isvalid) {
this.setState(initianValue, () => <Redirect to='/dashboard' />);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.