【发布时间】：2021-02-01 21:11:35
【问题描述】：
我正在一个网站上工作，目前我正在工作，所以有一个个人资料页面和编辑个人资料，如果您在按钮上编辑个人资料，单击它会自动更改个人资料页面中的内容，但按钮不是输入类型，提交它是导入的来自 Material 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"
/>
<h1>City</h1>
<input
// value={this.state.city}
// onChange={this.handleChange}
className="edit__input"
type="text"
placeholder="Enter Your City"
/>
<h1>State</h1>
<input
// value={this.state.state}
// onChange={this.handleChange}
className="edit__input"
type="text"
placeholder="Enter Your State"
/>
<h1>Zip Code</h1>
<input
// value={this.state.zip}
// onChange={this.handleChange}
className="edit__input"
type="number"
placeholder="Enter Your Zip Code"
/>
<h1>Country</h1>
<input
// value={this.state.country}
// onChange={this.handleChange}
className="edit__input"
type="text"
placeholder="Enter Your Country"
/>
<h1>
<label for="Category">Choose Your Work</label>
<br />
<select className="edit__drop" name="Category">
<option value="singer">singer</option>
<option value="lyricist">lyricist</option>
<option value="music director">music director</option>
<option value="mixing&mastering">mixing & mastering</option>
<option value="guitarist">guitarist</option>
<option value="producer">producer</option>
<option value="event management">event management</option>
<option value="musician band">musician band</option>
</select>
<Button className="edit__add">Add Category</Button>
</h1>
<Button className="edit__submit">Save To Profile</Button>
</div>
</div>
);
}
export default Edit;
这是我名为 Profile.js 的个人资料页面的代码
import React from "react";
import "./Profile.css";
import firebase from "firebase";
import { Avatar } from "@material-ui/core";
function Profile() {
return (
<div className="profile">
<h1 className="profile__title">Profile Page</h1>
<Avatar
className="profile__pic"
src={firebase.auth().currentUser.photoURL}
/>
</div>
);
}
export default Profile;
我有一个名为 post.js 的文件，其中有标题描述技能最高价格和最低价格以及一个 div，其中将存储标题描述技能最高价格和最低价格，就像在 freelancer.com 中一样，还有一个 Button是从材料 UI 中导入的
Post.js 的代码
import React from "react";
import "./Post.css";
import { Button } from "@material-ui/core";
import { Component } from "react";
class Post extends Component {
constructor(props) {
super(props);
this.state = {
title: "",
description: "",
skills: "",
maxPrice: "",
minPrice: "",
};
}
handleFormSubmit(event) {
event.preventDefault();
console.log(this.state);
}
// var titleInput = document.getElementById("projectTitle");
// var title = "";
// if(title) {
// titleInput.addEventListener("keyup", (event) => {
// // When user presses the enter key, then we update triple based on the
// // current value of the input
// if (event.keyCode === 13) {
// title = event.currentTarget.value;
// console.log(title);
// }
// });
// }
render() {
return (
<div className="post">
<center>
<h1 className="post__title">Post a Project</h1>
</center>
<div className="post__inputs">
<h1>Project Title</h1>
{/* <h1>{title}</h1> */}
<input
minLength="10"
maxLength="255"
id="projectTitle"
required
className="post__input"
placeholder="Enter Your Project Title"
/>
<h1>Tell us more about your Project</h1>
<textarea
className="post__desc"
minLength="30"
required
id="projectDescription"
placeholder="Enter Your Project Description"
maxLength="4000"
></textarea>
<h1>Enter Skills Required</h1>
<input
required
className="post__input"
id="projectSkill"
placeholder="Enter Skills"
/>
<h1>What is your estimated budget</h1>
<div className="post__price">
<h1>Min-</h1>
<snap className="post__priceIcon">₹</snap>
<input
min="500"
type="number"
id="maxPrice"
max="50000"
className="post__priceInput post__priceInputRight"
value="500"
/>
<h1>Max-</h1>
<snap className="post__priceIcon">₹</snap>
<input
min="500"
type="number"
id="minPrice"
max="50000"
value="1000"
className="post__priceInput"
/>
</div>
<div className="post__result">{/* <h1>{title}</h1> */}</div>
<br />
<Button
onClick={(e) => this.handleFormSubmit(e)}
className="post__submit"
>
Post Your Project
</Button>
</div>
</div>
);
}
}
export default Post;
这是我的 Projects.js 代码
import React from "react";
import "./Project.css";
function Projects() {
return <div className="project"></div>;
}
export default Projects;
很抱歉问了这么多，但我们将不胜感激
【问题讨论】：
-
这里有很多代码，没有明确的问题。请将您的问题表述为实际问题，以便我们确切知道您在寻找什么。还请考虑将您的代码缩减为仅与问题相关的代码。
-
我想将输入的值存储在变量中并在本地存储变量，这样它就不会刷新
标签： javascript html reactjs