在 React 中表单验证后如何路由用户？

Question

我是新来的反应并试图制作注册登录项目。

如果验证成功，我正在尝试将用户路由到登录/登录页面。

这是我的注册码。

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;

这是注册自并在完成后从如果没有错误我想将用户发送到登录页面或下一页。

我应该使用 Redux 吗？

我怎样才能做到这一点？

Answer 1

假设您的SignUp组件包装在Router中，您的组件应该已经可以使用 ` history .

所以你可以简单地这样做this.props.history.push 。 使用setState中的第二个参数，这很有趣，在设置 state 后执行（因为 setState 是异步的）

像这样

handleSubmit = (e) => {
  e.preventDefault();
  const isvalid = this.validForm();
  if (isvalid) {
    this.setState(initianValue, () => this.props.history.push("/dashboard"));//<----- like this
  }
};

如果您的SignUp组件不在Router内部，那么您可以使用withRouter 。 只需将Signup传递给 withRouter hoc。

Answer 2

我们可以使用<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' />);
};