如何将我的输入值存储在变量中并在本地存储数据

Question

我目前正在一个网站上工作，所以有一个个人资料页面和编辑个人资料，如果您在按钮上编辑个人资料，单击它会自动更改个人资料页面中的内容，但按钮不是输入类型提交它是从材料 UI 导入的核心，我希望它存储在本地，这样它就不会继续刷新页面这是我的编辑配置文件的代码，其名称为 Edit.jsimport React, { useState, useEffect, Component } from "react";import "./Edit.css";import ls from "local-storage";import { Avatar, Button } from "@material-ui/core";import firebase from "firebase";function Edit() {  const [name, setName] = useState("");  const [email, setEmail] = useState("");  const [number, setNumber] = useState(0);  const [state, setState] = useState("");  const [zip, setZip] = useState(0);  const [city, setCity] = useState("");  const [country, setCountry] = useState("");  // localStorage.setItem("name", name);  return (    <div className="edit">      <center>        <h1 className="edit__title">Edit Your Profile</h1>        <Avatar          className="edit__pic"          src={firebase.auth().currentUser.photoURL}        />      </center>      <div className="edit__inputs">        <h1>Full Name</h1>        <input          // value={this.state.name}          // onChange={this.handleChange}          className="edit__input"          type="text"          placeholder="Enter Your Full Name"        />        <h1>Email</h1>        <input          // value={this.state.email}          // onChange={this.handleChange}          className="edit__input"          type="email"          placeholder="Enter Your Email"        />        <h1>Number</h1>        <input          // value={this.state.number}          // onChange={this.handleChange}          className="edit__input"          type="number"          placeholder="Enter Your Number"        />  );}

Answer 1

If, On clicking "Save To Profile" Button you want to store on local storage then you can do this.

<Button className="edit__submit" onClick={() => {localStorage.setItem("name", name);}}>Save To Profile</Button>

否则，如果您在键入后立即存储它

<input

    // value={this.state.name}

    onChange={(e) => {this.handleChange(e); localStorage.setItem("name", e.target.value);}}

    className="edit__input"

    type="text"

    placeholder="Enter Your Full Name"

/>