javascript - 如何在条件项内使用链接和路由
问题描述
所以我试图在反应中浏览页面,我的目标是当我确实验证了我需要的东西(名称和号码)时,页面将切换,我将进入另一条路线。(不刷新页面)。我试图用 window.location 来做,但它刷新了页面
我不能使用<Link>
,因为我只想在验证后(在 IF 条件内)切换路由,或者我可以但我不知道如何。我的代码:
import React, {useState} from 'react'
import {Link} from 'react-router-dom';
export default function Signup(props) {
const [name, setName] = useState(' ')
const [number, setNumber] = useState(' ')
const [forklift, setForklift] = useState(false)
const [styleNumber,setStyleNumber]= useState({
display:'none',
})
const [styleName,setStyleName]= useState({
display:'none',
})
let validNum=false;
let validName=false;
let driverLicense=()=>{
if(forklift === 'true'){
setForklift(true)
}
else{
setForklift(false)
}
if(number.length<5 || number.length>5){
setStyleNumber({
display:'block',
color:'red'
})
}
else{
validNum=true;
}
if(name.indexOf(' ')==-1|| name.length<4){
setStyleName({
display:'block',
color:'red'
})
}
else{
validName=true;
}
if(validNum && validName){
props.addWorker(name,number,forklift)
let myBtn=document.getElementById('button').innerHTML=<Link to='/'></Link>
console.log(myBtn)
}
else{
alert('Error')
}
}
return (
<div>
<h2>Sign up</h2>
<label>No.</label>
<input onChange={(e)=>{setNumber(e.target.value)}} type='number' maxLength='5'></input><br />
<br /> <p style={styleNumber}> the number must be with 5 digits.</p>
<label>Full Name:</label> <input onChange={(e)=>{setName(e.target.value)}} ></input><br /> <br />
<p style={styleName} >the name must contain minimum 4 characters.</p>
<label>Forkligt truck</label> <br /> <br />
<input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift' value="true"/>
<label >Yes</label><br/>
<input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift' checked value="false"/>
<label >no</label><br /> <br />
<button id='button' onClick={driverLicense}>Create</button>
</div>
)
}
解决方案
我认为您想要实现的是在满足条件时重定向页面
在这种情况下
import React, {useState} from 'react'
import {Redirect} from 'react-router-dom';
export default function Signup(props) {
const [name, setName] = useState(' ')
const [isVerified, setIsVerified = useState(false);
const [number, setNumber] = useState(' ')
const [forklift, setForklift] = useState(false)
const [styleNumber,setStyleNumber]= useState({
display:'none',
})
const [styleName,setStyleName]= useState({
display:'none',
})
let validNum=false;
let validName=false;
let driverLicense=()=>{
if(forklift === 'true'){
setForklift(true)
}
else{
setForklift(false)
}
if(number.length<5 || number.length>5){
setStyleNumber({
display:'block',
color:'red'
})
}
else{
validNum=true;
}
if(name.indexOf(' ')==-1|| name.length<4){
setStyleName({
display:'block',
color:'red'
})
}
else{
validName=true;
}
if(validNum && validName){
props.addWorker(name,number,forklift)
setIsVerified(true);
}
else{
alert('Error')
}
}
if (isVerified) {
return <Redirect to="/" />
}
return (
<div>
<h2>Sign up</h2>
<label>No.</label>
<input onChange={(e)=>{setNumber(e.target.value)}} type='number' maxLength='5'></input><br />
<br /> <p style={styleNumber}> the number must be with 5 digits.</p>
<label>Full Name:</label> <input onChange={(e)=>{setName(e.target.value)}} ></input><br /> <br />
<p style={styleName} >the name must contain minimum 4 characters.</p>
<label>Forkligt truck</label> <br /> <br />
<input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift' value="true"/>
<label >Yes</label><br/>
<input onClick={(e)=>{setForklift(e.target.value)}} type="radio" name='Forklift' checked value="false"/>
<label >no</label><br /> <br />
<button id='button' onClick={driverLicense}>Create</button>
</div>
)
}