我编写了这个简单的代码来将数据保存到本地存储,但有时有效,有时无效(代码没有更改)。而且它主要保存的是空数据。这里发生了什么?当关闭、重新打开镶边窗口并输入新数据时,数据也会被删除。 这是return方法中的内容。
<div className="wrapper">
<div className="content">
<h1>Get in touch!</h1>
<p>Connect with us by sending your views.</p>
</div>
<div className="form">
<div className="top-form">
<div className="inner-form">
<div className="label">Name</div>
<input
type="text"
placeholder="Enter your name"
id="contname"
/>
</div>
<div className="inner-form">
<div className="label">Email</div>
<input
type="text"
placeholder="Enter your email"
id="contemail"
/>
</div>
<div className="inner-form">
<div className="label">Phone</div>
<input
type="text"
placeholder="Enter your phone no."
id="contph"
required
/>
</div>
</div>
<div className="middle-form">
<div className="inner-form">
<div className="label">Subject</div>
<input
type="text"
placeholder="Enter the subject"
id="contsub"
/>
</div>
</div>
<div className="bottom-form">
<div className="inner-form">
<div className="label">Message</div>
<textarea
placeholder="Enter your message"
id="contmessage"
></textarea>
</div>
</div>
<div className="btn" id="sendmessage" onClick={ev => { this.addData(ev) }}>
Continue
</div>
</div>
这是保存数据的部分:
var contactData = [];
export default class Contact extends Component {
componentDidMount() {
window.scrollTo(0, 0)
}
addData = (ev) => {
ev.preventDefault();
let cdata = {
contactname: document.getElementById("contname").value,
contactphno: document.getElementById("contph").value,
contactemail: document.getElementById("contemail").value,
contactsubject: document.getElementById("contsub").value,
contactmessage: document.getElementById("contmessage").value
};
contactData.push(cdata);
localStorage.setItem("Contactinfo", JSON.stringify(contactData));
alert("Data Submitted succesfully!");
};
最佳答案
就像其他人所说的那样,利用react setState。对于存储在 localStorage 中,此视频可能会帮助您 https://www.youtube.com/watch?v=ZZS1irWSfxc
关于javascript - 为什么 react 中表单数据没有保存到本地存储?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60180087/