如何在提交表单时在reactjs中一个接一个地执行两个功能

Question

我一直在使用ReactJS实现一个表单，遇到了一个问题，无法找到解决方案：

->我使用ReactJS创建了一个表单，在提交它时，我成功地将验证添加到了输入值中，但当我将路由器添加到其中以重定向到另一个页面时，验证不起作用，而是被重定向而不是验证。因此，我已经检查了使用onSubmit表单的多个函数的解决方案，以便执行验证和路由，但没有任何结果。

->下面我有我的代码，任何人都可以帮助我进行验证，然后在提交表单时一个接一个地验证输入字段后重定向

代码：

import React, { useState, useEffect } from 'react';
import {  NavLink, useNavigate } from 'react-router-dom';

function Password () {
    
    const initialvalues = {password:""}
    const [formValues, setFormValues] = useState(initialvalues);
    const [formErrors, setFormErrors] = useState({});
    const [isSubmit, setIsSubmit] = useState(false);
    const handleChange = (e) =>{
        const{name,value} = e.target;
        setFormValues({...formValues, [name]:value});
    }
    let navigate = useNavigate();
    const handleSubmit = (e) =>{
        e.preventDefault();
        setFormErrors(validate(formValues));
        setIsSubmit(true);
        navigate('afterlogin');
    }
    useEffect(()=>{
        console.log(formErrors);
        if(Object.keys(formErrors).length ===0 && isSubmit){
            console.log(formValues);
        }
    },[formErrors])
    const validate = (values) =>{
        const errors = {}
        
        const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{4,12}$/;
        
        if(!values.password){
            errors.password = "Password is required";
        }else if(!regexp.test(values.password)){
            errors.password = "passsword must contain atleast one uppercase,lowercase,number,special character";
        }
        else if(values.password.length < 4){
            errors.password = "Password must me more than 4 characters";
        }else if (values.password.length > 6){
            errors.password = "Password cannot be more than 6 characters";
        }
        return errors;
    };
    
        return (
            <div>
               
               <form onSubmit={handleSubmit} >
                   
                    <div>
                        <input type="password" name='password' placeholder='Password'
                                value={formValues.password}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                         />
                    <p style={{color:"red"}}>{formErrors.password}</p>
                        <button className='btn-primary' 
                                    style={{width:"210px",height:"30px",fontSize:"15px",
                                            marginLeft:"10px",
                                            backgroundColor:"skyblue"
                                            }}>
                                            Login</button>
                    </div>
                 </form>
                </div>
        )
    }
export default Password;

->这是我的代码，如果有人清楚我面临的问题，请帮助我解决这个问题。

   **Thanks in advance**

Answer 1

handleSubmit是同步的，并且无条件地导航到"；"登录后"；每次运行提交处理程序时。如果我正确理解你的问题，那么你似乎应该验证表格，只有在没有错误的情况下才能导航。

检查提交处理程序中的验证errors密钥长度，如果有任何错误，请更新相应的状态，否则发出命令式导航。

const handleSubmit = (e) =>{
  e.preventDefault();
  const errors = validate(formValues);
  if (Object.keys(errors).length) {
    setFormErrors(errors);
  } else {
    navigate('afterlogin');
  }
}

Answer 2

如果每个字段都有效，则需要检查验证是否通过的条件，然后将submit设置为true并导航试试这个

const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validate(formValues)
    if (Object.keys(errors).length) {
        setFormErrors(errors);
    }
    else {
        setIsSubmit(true);
        navigate('afterlogin');
    }
}