javascript - React re-rending 手动路由仅在刷新一次时有效

问题描述

我正在尝试路由一个组件，以便每次单击按钮时都会显示新内容。

我想出了下一个解决方案：

import React, {useState} from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useHistory
  } from "react-router-dom";
import Starter from '../../images/calculator.svg';
import Container from 'react-bootstrap/container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import $ from 'jquery';

function Calculator() {
    const [inputName, setInputName] = useState('');
    const [inputPhone, setInputPhone] = useState('');
    const [inputValid, setInputValid] = useState(false);
    const history = useHistory();

    //Check if filled the inputs in valid way
    const handleValidation = () =>{
        let errors = {};
        let formIsValid = true;
    
        //Name
        if(typeof inputName !== "undefined"){
           if(!inputName.match(/^[a-zA-Z]+$/)){
              formIsValid = false;
              errors["name"] = "רק אותיות בשם, ללא מספרים או סימנים";
           }        
        }
        if(inputName === ""){
            formIsValid = false;
            errors["name"] = "שם מלא חסר";
         }
         if(typeof errors['name'] === 'undefined'){
            errors['name'] = "";
        }



    
        //Phone number
        if(inputPhone.length !== 9){
            formIsValid = false;
            errors["phone"] = "המספר אינו תקין";
        }
        if(typeof inputPhone !== "undefined"){
            if(!inputPhone.match(/^\d+$/)){
               formIsValid = false;
               errors["phone"] = "רק מספרים בטלפון, ללא אותיות";
            }        
         }
         if(inputPhone === ''){
            formIsValid = false;
            errors["phone"] = "מספר פלאפון חסר";
         }
         if(typeof errors['phone'] === 'undefined'){
             errors['phone'] = "";
         }

        $('.errors').html(errors["name"] + " <br /> " + errors["phone"]);
        setInputValid(formIsValid);
        return formIsValid;
    }





    //Handles the click
    //if valid continue
    //if not alert error
    const handleClick = () =>{
        if(inputValid){
            history.push("/start");
        }
        else{
            alert('נא למלא את תיבות הטקסט כנדרש');
        }
    }

    return (
        <section id="calculator">
            <h1>
                מחשבון הצעת מחיר
            </h1>
            <br/>
            <Container>
                <Router>
                    <Switch>
                        <Route exact path="/">
                            <div className="center">
                                <img src={Starter} style={{width: '500px'}} alt="מחשבון הצעת מחיר"/>
                                <br/>
                                <input onChange={handleValidation} type="text" id="name" placeholder="שם מלא" value={inputName} onInput={e => setInputName(e.target.value)} />
                                <br/>
                                <br/>
                                <input onChange={handleValidation} type="text" id="phone" placeholder="מספר טלפון" value={inputPhone} onInput={e => setInputPhone(e.target.value)}/>
                                <br/>
                                <p className="errors"></p>
                                <br/>
                                    <button id="btn" onClick={handleClick}>התחל</button>
                                <br/><br/><br/>
                                    אפשר גם לקבל הצעה בוואצאפ!
                            </div>
                        </Route>
                        <Route path="/start">
                            test
                        </Route>
                    </Switch>
                </Router>
            </Container>
        </section>
    );

}

export default Calculator;

handleValidation - 处理表单的有效性，工作正常，通过调试仔细检查。

handleClick - 检查表单是否有效，如果为真则执行路由，如果不是警报。

每次inputValid返回 true，我的网站路径都会更改为localhost:3000/start，但只有在我刷新它时才会重新呈现。

如何在不刷新页面的情况下重新渲染手动路由？

标签： javascriptreactjsjsx

javascript - React re-rending 手动路由仅在刷新一次时有效

问题描述

解决方案

推荐阅读