reactjs - 我希望页面仅在验证成功时才路由到另一个页面

Question

我希望页面仅在验证成功时路由到另一个页面，当没有添加按钮路由但当我添加路由时，表单显示正确的验证。所以在路由之前我必须在按钮点击上写什么条件。

代码如下：

import React,{ useState } from 'react'
import { useHistory } from 'react-router-dom'

function Form() {
    const history = useHistory()
    const [firstName,setFirstName] = useState("")
    const [lastName,setLastName] = useState("")
    const [email,setEmail] = useState("")

    const [firstNameErr,setFirstNameErr] = useState({})
    const [lastNameErr,setLastNameErr] = useState({})
    const [emailErr,setEmailErr] = useState({})

    const onSubmit = (e) => {
        e.preventDefault();
        const isValid = formValidation();
    }

    const formValidation = () => {
        const firstNameErr = {};
        const lastNameErr = {}
        const emailErr = {}
        let isValid = true;

        if(firstName.trim().length < 5) {
            firstNameErr.firstNameShort = "first name is short";
            isValid = false;
        }

        if(!lastName.includes("123")) {
            lastNameErr.lastName123 = "Last name must have 123";
            isValid = false;
        }

        if(!email.includes("@")) {
            emailErr.emailerror = "email must have @ character";
        }

        setFirstNameErr(firstNameErr);
        setLastNameErr(lastNameErr);
        setEmailErr(emailErr);
        return isValid;
    }


    return (
        
            <form onSubmit={onSubmit}>
                <label> First Name: </label>
                <input type="text"
                value={firstName}
                onChange={(e)=> {setFirstName(e.target.value)}}/>
                <br/>
                {Object.keys(firstNameErr).map((key)=>{
  return <div style={{color: "red"}}>{firstNameErr[key]}</div>
                })}
                <label> Last Name: </label>
                <input type="text"
                value={lastName}
                onChange={(e)=> {setLastName(e.target.value)}}/>
                <br/>
                {Object.keys(lastNameErr).map((key)=>{
  return <div style={{color: "red"}}>{lastNameErr[key]}</div>
                })}
                <br/>
                <label> email: </label>
                <input type="email"
                value={email}
                onChange={(e)=> {setEmail(e.target.value)}}/>
                <br/>
                {Object.keys(emailErr).map((key)=>{
  return <div style={{color: "red"}}>{emailErr[key]}</div>
                })}
                <button type="submit" onClick={() => history.push('/myvehicles')}>Submit</button>

                </form>      
    )
}

export default Form

所以上面的代码如何在历史推送之前使用我必须添加的逻辑路由到我的车辆页面？

标签： reactjsreact-hooks

Answer 1

无需添加点击事件处理程序..您已经有提交处理程序。只需在此处添加验证。

const onSubmit = (e) => {
        e.preventDefault();
        const isValid = formValidation();
        if(isValid){ // if form is valid ,route
           history.push('/myvehicles')
        }
    }