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中创建了一个简单表单，它在单击Submit按钮后显示了数据，但是在页面重新加载后消失了。即使重新加载页面后，我也想显示用户信息，然后我想在提交表单后清除字段

谢谢，我前进了

Answer 1

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

Answer 2

如果要在页面重新加载后显示表单数据，则需要将它们存储在最佳位置，该位置将使用浏览器local storage API。要在提交后清除表单数据很容易，只需将两个输入状态值添加到您在Submit方法中已经拥有的sp方法中即可。

首先，我们将尝试从组件类的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.
   }
}

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

2 个答案: