刷新页面后保留表单值[重复]

Question

我使用 ReactJS 创建了一个基本的表单验证页面，其中输入字段使用正则表达式进行验证。

我有一个问题，当我用一些数据填充输入字段时，如果我在完成之前单击刷新页面，输入字段会被清除。

我想在刷新后停止清除输入字段。

我该怎么做。

下面是我的代码：

import React, { useState, useEffect } from 'react';
import PhoneIcon from '@mui/icons-material/Phone';
import LockIcon from '@mui/icons-material/Lock';
import { NavLink, useNavigate } from 'react-router-dom';

import "../index.css";

function Github () {
    
    
    const initialvalues = {number:"", 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});
    }

    const handleSubmit = (e) =>{
        e.preventDefault();

        const errors = validate(formValues);
      
        if (Object.keys(errors).length) {
          setFormErrors(errors);
        } else {
          setIsSubmit(true);
        }
    }

    let navigate = useNavigate();

    const handleSubmits = (e) =>{
         e.preventDefault();
         const passerrors = validates(formValues);
      
        if (Object.keys(passerrors).length) {
          setFormErrors(passerrors);
        } else {
          navigate('/admin');
        }
    }

    

    useEffect(()=>{
        console.log(formErrors);
        if(Object.keys(formErrors).length ===0 && !isSubmit){
            console.log(formValues);
        }
    },[formErrors])

    const validates = (values) =>{
        const passerrors ={}

        const regexp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{4,12}$/;

        if(!values.password){
            passerrors.password = "Password is required";
        }else if(!regexp.test(values.password)){
            passerrors.password = "passsword must contain atleast one uppercase,lowercase,number,special character";
        }
        else if(values.password.length < 4){
            passerrors.password = "Password must me more than 4 characters";
        }else if (values.password.length > 6){
            passerrors.password = "Password cannot be more than 6 characters";
        }
        return passerrors;

    }

    const validate = (values) =>{
        const errors = {}
        
        const regexn = /^(\+91[-\s]?)?[0]?(91)?[789]\d{9}$/;

        if(!values.number){
            errors.number = "Mobile Number is required";
        }else if(!regexn.test(values.number)){
            errors.number = "Please enter a valid mobile number"
        }else if(values.number.length > 10){
            errors.number = "number must be only 10 digits"
        }


        return errors;
    };
    
        return (
            <div className="container" 
                    style={{textAlign:'center',paddingTop:"50px"}}>

                <img src="images/img1.jpg" alt='' 
                        width="100px" height="100px" 
                        style={{borderRadius:"50%"}} /><br/>
                
                <div style={{justifyContent:'space-between'}}>
                
            <br/><br/><br/><br/>
                {  !isSubmit 
                    
                    ? 
                            
                    <form onSubmit={handleSubmit} >
                        <div>
                            <div>
                                <label style={{position:"relative", top:"8px",right:"5px",left:"115px"}}>

                                <PhoneIcon/></label>

                                <input className='input_field' type="number" name="number" placeholder='enter number'
                                        autoComplete='off'
                                        value={formValues.number}
                                        onChange={handleChange}
                                        style={{width:"180px",height:"35px"}}
                                />
                                <label className='input_label'>Mobile Number</label>

                                <p style={{color:"red",fontSize:"13px"}} >{formErrors.number}</p>
                            </div>
                                <button className='btn-primary'
                                        style={{width:"210px",height:"30px",fontSize:"15px",
                                        marginLeft:"30px",marginTop:"20px",
                                        backgroundColor:" rgb(0, 110, 255)"
                                        }}>
                                        Submit</button>
                        </div>
                    </form>
                     
                    :

                    <form onSubmit={handleSubmits} >
                        <div>
                            <div>
                                <label style={{position:"relative", top:"8px",right:"5px",left:"80px"}} ><LockIcon/></label>
                                <input className='input_fieldp' type="password" name='password' placeholder='enter password'
                                value={formValues.password}
                                onChange={handleChange}
                                style={{width:"180px",height:"35px"}}
                                />
                                <label className='input_labelp'>Password</label>
                                <p style={{color:"red",fontSize:"13px"}}>{formErrors.password}</p>
                            </div>
                    
                            <button  
                                    style={{width:"210px",height:"30px",fontSize:"15px",
                                            marginLeft:"30px",marginTop:"20px",
                                            backgroundColor:" rgb(0, 110, 255)"
                                            }}>
                                            Login</button>
                        </div>
                    </form>
                }
                </div>
            </div>
        )
    }

export default Github;

建议我该怎么做。

Answer 1

刷新时不能使用react state 或redux store，因为它们会在每次页面刷新时被清除和初始化。我在这里看到的最佳方法是使用您的 localstorage 来存储值。 然后您可以检查localstorage 中的数据是否可用，并使用useEffect 挂钩在初始渲染中使用该数据。

Answer 2

您可以使用localstorage。你可以使用原生的localstorage，但我推荐使用lscache，因为它更灵活（如果浏览器没有lscace，也可以处理），而且你使用的是框架。

你可以做的是在你的handleCange 上，每次你在状态上保存一些东西，你也把它保存在本地存储中：

    const handleChange = (e) =>{
        const{name,value} = e.target;
        setFormValues({...formValues, [name]:value});

        // you can add a third parameter for expiration if you don't want it to be there forever
        lscache.set(name, value); 
    }

然后有一个useEffect 来处理刷新时缓存上的数据获取

useEffect(() => {
  const number = lscache.get("number");
  
  setFormValues({...formValues, number});
}, [])

PS。确保缓存的name 在表单/站点上是唯一的。