如何在提交表单后清除字段以及如何在REACT JS中重新加载页面后显示用户信息

Question

import React, { Component } from 'react';

import classes from './Form.css';

class Form extends Component {

    state = {
        firstName: '',
        phoneNo: '',
        showForm: false
    }

    displayFormHandler = (e) => {
        e.preventDefault();
        const updatedName = e.target.value;
        this.setState({
            firstName: updatedName,
        });

    }

    displayPhoneNoHandler = (e) => {
        e.preventDefault();
        const updatedPhoneNo = e.target.value;
        this.setState({ phoneNo: updatedPhoneNo });
    }

    handleFormSubmit = (e) => {
        e.preventDefault();
        this.setState({
            showForm: true
        });



    }
    render() {
        return (
            <div className={classes.Form}>
                <form onSubmit={this.handleFormSubmit}>
                    <label>Name:</label>
                    <input type="text" 
                        className={classes.inputArea}
                        name="firstName"
                        placeholder="Name"
                        onChange={this.displayFormHandler}
                        value={this.state.firstName} />
                    <label>PhoneNo:</label>
                    <input type="text"
                        className={classes.inputArea}
                        placeholder="PhoneNo"
                        name="phoneNo"
                        onChange={this.displayPhoneNoHandler}
                        value={this.state.phoneNo} />
                    <button type="submit" className={classes.Button}
                        clicked={this.handleFormSubmit}  >Submit</button>
                    <div className={classes.UserInfo}>
                        {this.state.showForm && <p>UserName: {this.state.firstName}</p>}
                        {this.state.showForm && <p>UserName: {this.state.phoneNo}</p>}


                    </div>

                </form>
            </div>

        );
    }
}

export default Form;

这里的代码，

目前，我在React JS中创建了简单的表单，它在单击提交按钮后显示数据，但在页面重新加载后它会消失。我想在重新加载页面后显示用户信息，然后我想在提交表单后清除该字段

谢谢，我提前了

Answer 1

要在用户重新加载页面后显示表单数据，您可以使用浏览器本地存储，并在每个会话开始时只读取存储的数据。

Answer 2

如果您想在页面重新加载后显示表单数据，您需要将它们存储在最佳位置使用浏览器local storage API。要在提交后轻松清除表单数据，只需将两个输入状态值添加到您在提交方法中已有的setState方法中。

首先，我们将尝试从组件类的localStorage中的constructor获取数据。如果localStorage不为空，我们将其值设置为默认组件状态。这是一个代码示例。

constructor() {
   const data = JSON.parse(localStorage.getItem('formData')); // get data from localStorage and parse it.
   if (data !== null) { // Check if data even exists
     this.state = { 
       firstName: data.firstName,
       phoneNo: data.phoneNo,
       showForm: false
     }; // set default React state.
   }
}

其次在表单提交后设置数据。这是另一个代码示例。

handleFormSubmit = (e) => {
        e.preventDefault();
        const {firstName, phoneNo} = this.state;
        localStorage.setItem('formData', JSON.stringify({ firstName, phoneNo })); // parse the data and save it.
        this.setState({
            firstName: '',
            phoneNo: '',
            showForm: true
        }); // Clear the form data
    }