表单验证后如何将用户发送到下一页以进行反应? [英] How to send User to Next Page After form validation in react?

查看：53
本文介绍了表单验证后如何将用户发送到下一页以进行反应?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这在我的注册组件中，如果用户名和密码正确，我会尝试将用户发送到登录组件.

这是下面的注册码，

import React, { Component } from 'react';从'react-router-dom'导入{链接}；从 'axios' 导入 Axios；常量初始值 = {用户名: ''，密码: ''，名称错误:'',传递错误:'',数据错误:'',};类注册扩展组件{构造函数(道具){超级(道具)；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,});};有效形式(){让 nameError = '';让 passError = '';让数据错误 = '';常量用户 = {用户名:this.state.username，密码:this.state.password，};如果(！this.state.username){nameError = '输入姓名';}if (user.username !== '' && user.password !== '') {axios.post('http://localhost:9000/checkUser', 用户).then((res) => this.setState({ dataError: res.data })).catch((err) => console.log(err));}如果(！this.state.password){passError = '输入密码';}if (nameError || passError || dataError) {this.setState({名称错误，通过错误，数据错误，});返回假；}返回真；}handleSubmit = (e) =>{e.preventDefault();const isvalid = this.validForm();如果(无效){this.setState(initianValue, () => this.props.history.push('/SignIn'));}};使成为() {返回 (
<span className='create'>创建账户</span>
<form onSubmit={this.handleSubmit}>
<label>用户名</label><输入类型='文本'名称='用户名'值={this.state.username}类名='表单控件'onChange={this.handleInputChange}/><div className='error'>{this.state.nameError}{this.state.dataError}
<br/><label>密码</label><输入类型='密码'名称='密码'值={this.state.password}类名='表单控件'onChange={this.handleInputChange}/><div className='error'>{this.state.passError}</div><br/><button type='submit' className='btn btn-primary'>报名
</表单>
<标签>已经有帐户 登录</链接>

);}}导出默认注册；

如果我输入正确的用户名和密码，但输入了错误的用户名/密码，它也能完美运行，它也会将我发送到登录页面并像这样在控制台中显示警告

index.js:1 警告:无法对卸载的组件执行 React 状态更新.这是一个空操作，但它表明您的应用程序中存在内存泄漏.要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务.在注册中(由 Context.Consumer 创建)

我包装了组件注册和登录路由器，

这是我的 server.js 文件，用于在数据库中的用户名和密码正确时发送数据

app.post('/checkUser', function (req, res) {const name = req.body.username;const pass = req.body.password;连接查询(`SELECT * FROM users WHERE username = (?) AND password = (?) `,[姓名，通行证]，(错误，行)=>{如果(错误)抛出错误；如果(！行.长度){res.send('数据错误');}});});

解决方案

您的 validForm 进行异步调用.当异步调用完成时，validForm 函数以及 handleSubmit 函数的执行已经完成.然后 then 块在您设置状态的地方执行，因此会出现错误.

解决方案:使 validForm 成为异步函数并等待您的异步调用.还要使 handleSubmit 函数异步并等待 validForm.

工作演示

代码片段

class SignUp extends Component {构造函数(道具){超级(道具)；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() {让 nameError = "";让 passError = "";让 dataError = "";常量用户 = {用户名:this.state.username，密码:this.state.password};如果(！this.state.username){nameError = "输入姓名";}if (user.username !== "" && user.password !== "") {await Axios.get("https://jsonplaceholder.typicode.com/todos/1", user)//假api.then(res => {dataError = "用户已经存在";//提供动态错误..//this.setState({ dataError: res.data });//不需要}).catch(err => console.log("err", err));}如果(！this.state.password){passError = "输入密码";}if (nameError || passError || dataError) {this.setState({名称错误，通过错误，数据错误});返回假；}返回真；}handleSubmit = 异步 e =>{e.preventDefault();const isvalid = await this.validForm();如果(无效){this.setState(initianValue, () => this.props.history.push("/SignIn"));}};使成为() {返回 (<div className="Main"><span className="create">创建帐户</span><div className="注册"><form onSubmit={this.handleSubmit}><div className="form-group"><label>用户名</label><输入类型=文本"名称=用户名"值={this.state.username}className =表单控件"onChange={this.handleInputChange}/><div className="error">{this.state.nameError}{this.state.dataError}

<br/><label>密码</label><输入类型=密码"名称=密码"值={this.state.password}className =表单控件"onChange={this.handleInputChange}/><div className="error">{this.state.passError}</div><br/><按钮类型=提交"className=btn btn-primary">报名

</表单>

<div className="signinForm"><标签>已经有帐户<链接到=/登录">登录</链接>

);}}

This in My SignUp Component, Im trying To send User to Signin Component If Username And Password Is correct.

this is Signup Code Below,

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;

Its Works Perfect If I Put Right username and password but in wrong username / password its also send me to Signin Page and Shows warning in console like this

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in SignUp (created by Context.Consumer)

i wrap Both Component SignUp And Signin In Router,

this is my server.js file to send data if username and password is correct in database

app.post('/checkUser', function (req, res) {
  const name = req.body.username;
  const pass = req.body.password;

  conn.query(
    `SELECT * FROM users WHERE username  = (?) AND password = (?) `,
    [name, pass],
    (err, rows) => {
      if (err) throw err;

      if (!rows.length) {
        res.send('Wrong Data');
      }
    }
  );
});

解决方案

Your validForm makes an async call. By the time the async call is finished the validForm function as well as handleSubmit function execution is already completed. Then the then block is executed where you are setting state and therefore the error.

Solution: Make validForm an async function and await for your async call. Also make handleSubmit function an async and await for validForm.

Working demo

Code snippet

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
    });
  };

  async 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 !== "") {
      await Axios.get("https://jsonplaceholder.typicode.com/todos/1", user) //fake api
        .then(res => {
          dataError = "user already exists"; //provide dynamic error..
          //this.setState({ dataError: res.data }); // not required
        })
        .catch(err => console.log("err", err));
    }

    if (!this.state.password) {
      passError = "Enter Password";
    }

    if (nameError || passError || dataError) {
      this.setState({
        nameError,
        passError,
        dataError
      });
      return false;
    }

    return true;
  }

  handleSubmit = async e => {
    e.preventDefault();
    const isvalid = await 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>
    );
  }
}

这篇关于表单验证后如何将用户发送到下一页以进行反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆