提交表單后如何清除字段並在頁面重新加載后顯示表單值

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

如果要在頁面重新加載后顯示表單數據，則需要將它們存儲在最佳位置，請使用瀏覽器本地存儲 API。 要在提交后清除表單數據很容易，只需將兩個輸入狀態值添加到您在setState方法中已經具有的setState方法中即可。

首先，我們將嘗試從組件類的constructor中的localStorage獲取數據。 如果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
    }