React Router-在验证时重定向到另一个页面

加布里埃尔·安德拉德(Gabriel Andrade)

表单验证时,我试图重定向到另一个页面,但是我的工作方式不起作用,我尝试了许多方法,但是没有一个起作用,我的想法将会爆炸。

在该代码上,我试图使用react-router-dom(Router),我真的不知道为什么这不起作用!

请遵循以下代码:

import React from 'react';
import { Redirect } from 'react-router-dom'
import './styles.css'

import Logo from '../../assets/FormRegister/logo.jpg'


class FormRegister extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fields: {},
      errors: {}
    }
  }

  handleValidation() {
    let fields = this.state.fields;
    let errors = {};
    let formIsValid = true;

    if (!fields["user"]) {
      formIsValid = false;
      errors["user"] = "Informe o usuário!";
    }

    if (!fields["password"]) {
      formIsValid = false;
      errors["password"] = "Informe a senha!";
    }
    let number = /\d+/g;
    let specialCharacter = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
    let alphanumeric = /[A-Za-z0-9]+$/;
    if (typeof fields["password"] !== "undefined") {
      if (fields["password"].length < 8) {
        formIsValid = false;
        errors["password"] = "Password deve possuir ao menos 8 caracteres!";
      }
      if (!specialCharacter.test(fields["password"])) {
        formIsValid = false;
        errors["password"] = "Password deve conter ao menos 1 caracter especial!";
      }

      if (!alphanumeric.test(fields["password"])) {
        formIsValid = false;
        errors["password"] = "Password deve conter ao menos 1 caracter alfanumérico!";
      }
    }
    if (typeof fields["password"] !== "undefined") {
      if (!number.test(fields["password"])) {
        formIsValid = false;
        errors["password"] = "Password deve conter ao menos 1 caracter numérico!";
      }
    }

    if (!fields["confirmPassword"]) {
      formIsValid = false;
      errors["confirmPassword"] = "Confirme a senha!"
    }

    if (typeof fields["confirmPassword"] !== "undefined") {
      if (fields["password"] !== fields["confirmPassword"]) {
        formIsValid = false;
        errors["confirmPassword"] = "As senhas não são iguais!";
      }
    }

    this.setState({ errors: errors });
    return formIsValid;
  }

  registerSubmit(e) {
    e.preventDefault();

    if (this.handleValidation()) {
      return <Redirect to="/leads" />
    }

  }

  handleChange(field, e) {
    let fields = this.state.fields;
    fields[field] = e.target.value;
    this.setState({ fields });
  }
  render() {
    
    return (
      <>
        <div className="container center-screen">
          <div className="main-form center-form">
            <div className="div-logo">
              <img src={Logo} alt="Logo" className="logo" />
            </div>
            <div className="div-form">
              <form id="form1" onSubmit={this.registerSubmit.bind(this)}>
                <label htmlFor="user">Usuário *</label>
                <div className="div-form-error">
                  <span className="form-error">{this.state.errors["user"]}</span>
                </div>
                <input type="text" name="user" onChange={this.handleChange.bind(this, "user")} value={this.state.fields["user"]} />

                <label htmlFor="password">Password *</label>
                <div className="div-form-error">
                  <span className="form-error">{this.state.errors["password"]}</span>
                </div>
                <input type="password" name="password" placeholder="*******" onChange={this.handleChange.bind(this, "password")} value={this.state.fields["password"]} />

                <label htmlFor="confirmPassword" >Confirmação Password *</label>
                <div className="div-form-error">
                  <span className="form-error">{this.state.errors["confirmPassword"]}</span>
                </div>
                <input type="password" name="confirmPassword" placeholder="*******" onChange={this.handleChange.bind(this, "confirmPassword")} value={this.state.fields["confirmPassword"]} />

                <button type="submit" form="form1" value="Submit" className="register">
                  Registrar
              </button>

              </form>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default FormRegister;

您能帮我解决这个问题吗?我将不胜感激!

萨米普

重定向仅在渲染功能内有效。如果要将用户重定向到另一个URL,则可以使用history.push(url)。

import { withRouter } from 'react-router-dom'

您的registerSubmit函数可以是

 registerSubmit(e) {
    const { history } = this.props;
    e.preventDefault();

    if (this.handleValidation()) {
      history.push("/leads")
    }
  }

并用withRouter包装FormRegister

export default withRouter(FormRegister);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

承诺后如何使用react-router重定向到另一个URL?

来自分类Dev

React上下文如何知道我正在引用react-router将我重定向到另一个URL

来自分类Dev

React上下文如何知道我正在引用react-router将我重定向到另一个URL

来自分类Dev

如何使用 React Router 路由到另一个 url 并使用新组件重新渲染页面?

来自分类Dev

ZeroMQ ROUTER-DEALER重定向到另一个ROUTER-DEALER问题

来自分类Dev

将此this.props.children传递到react-router中的另一个文件

来自分类Dev

在React中将其重定向到另一个组件时,如何停止呈现先前的组件

来自分类Dev

React:如果用户已经登录,如何重定向到另一个URL?

来自分类Dev

使用 React Router 重定向

来自分类Dev

如何使用React Router和ReactScroll在特定ID上平滑滚动到另一个页面

来自分类Dev

如何将组件名称从另一个组件的对象传递到React Router Dom中的Route?

来自分类Dev

如何通过React Router链接将状态数据传递到另一个网页?

来自分类Dev

UI-Router:在页面刷新时将状态重定向到第一个孩子

来自分类Dev

当我将它分成另一个组件时,React-router Redirect 似乎不起作用

来自分类Dev

使用React Router重定向到仅显示组件/页面内容的页面

来自分类Dev

react-router - 将私人页面重定向到登录页面不起作用

来自分类Dev

如何通过在 react.js 中从该组件设置道具来重定向到另一个组件

来自分类常见问题

如何在React Router中将DefaultRoute设置为另一个路由

来自分类Dev

React-router-dom goBack(),如何从另一个js文件继承prop?

来自分类Dev

React Router-基于身份验证的重定向

来自分类Dev

当我使用从react-router-dom重定向时,出现TypeError:func.apply不是一个函数。我是新来的反应者

来自分类Dev

在react-router 2中以编程方式重定向到页面

来自分类Dev

React Router-嵌套链接重定向到自定义404页面

来自分类Dev

React router v4,将未知路由重定向到主页/根页面

来自分类Dev

如何使用 React Router v4 将错误路由重定向到特定页面

来自分类Dev

React Router Dom 受保护的路由在刷新页面期间始终重定向到登录

来自分类Dev

使用“this.props.router.push”单击时导航到另一个组件(和页面)的问题

来自分类Dev

React Router默认路由重定向到/ home

来自分类Dev

React-Router:无法从/重定向到/ home

Related 相关文章

  1. 1

    承诺后如何使用react-router重定向到另一个URL?

  2. 2

    React上下文如何知道我正在引用react-router将我重定向到另一个URL

  3. 3

    React上下文如何知道我正在引用react-router将我重定向到另一个URL

  4. 4

    如何使用 React Router 路由到另一个 url 并使用新组件重新渲染页面?

  5. 5

    ZeroMQ ROUTER-DEALER重定向到另一个ROUTER-DEALER问题

  6. 6

    将此this.props.children传递到react-router中的另一个文件

  7. 7

    在React中将其重定向到另一个组件时,如何停止呈现先前的组件

  8. 8

    React:如果用户已经登录,如何重定向到另一个URL?

  9. 9

    使用 React Router 重定向

  10. 10

    如何使用React Router和ReactScroll在特定ID上平滑滚动到另一个页面

  11. 11

    如何将组件名称从另一个组件的对象传递到React Router Dom中的Route?

  12. 12

    如何通过React Router链接将状态数据传递到另一个网页?

  13. 13

    UI-Router:在页面刷新时将状态重定向到第一个孩子

  14. 14

    当我将它分成另一个组件时,React-router Redirect 似乎不起作用

  15. 15

    使用React Router重定向到仅显示组件/页面内容的页面

  16. 16

    react-router - 将私人页面重定向到登录页面不起作用

  17. 17

    如何通过在 react.js 中从该组件设置道具来重定向到另一个组件

  18. 18

    如何在React Router中将DefaultRoute设置为另一个路由

  19. 19

    React-router-dom goBack(),如何从另一个js文件继承prop?

  20. 20

    React Router-基于身份验证的重定向

  21. 21

    当我使用从react-router-dom重定向时,出现TypeError:func.apply不是一个函数。我是新来的反应者

  22. 22

    在react-router 2中以编程方式重定向到页面

  23. 23

    React Router-嵌套链接重定向到自定义404页面

  24. 24

    React router v4,将未知路由重定向到主页/根页面

  25. 25

    如何使用 React Router v4 将错误路由重定向到特定页面

  26. 26

    React Router Dom 受保护的路由在刷新页面期间始终重定向到登录

  27. 27

    使用“this.props.router.push”单击时导航到另一个组件(和页面)的问题

  28. 28

    React Router默认路由重定向到/ home

  29. 29

    React-Router:无法从/重定向到/ home

热门标签

归档