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

Question

我目前正在一个网站上工作，所以有一个个人资料页面和编辑个人资料，如果您在按钮上编辑个人资料，单击它会自动更改个人资料页面中的内容，但按钮不是输入类型提交它是从材料 UI 导入的核心，我希望它存储在本地，这样它就不会继续刷新页面

这是我的编辑配置文件的代码，其名称为 Edit.js

import 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&nbsp; &nbsp; // value={this.state.name}&nbsp; &nbsp; onChange={(e) => {this.handleChange(e); localStorage.setItem("name", e.target.value);}}&nbsp; &nbsp; className="edit__input"&nbsp; &nbsp; type="text"&nbsp; &nbsp; placeholder="Enter Your Full Name"/>