Javascript 为什么表单数据没有保存到react中的localstorage？

我编写了这段简单的代码来将数据保存到本地存储，但有时可以工作，有时不能（代码没有更改）。而且它主要保存空数据。这是怎么回事？当chrome窗口关闭、重新打开并输入新数据时，数据也会被擦除。 这是返回方法中的内容

<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>

---

像其他人所说的那样，利用react setState。对于在localStorage中存储，此视频可能会帮助您

@kaido没有显示任何错误。就是不管用。同样的代码工作得非常完美，我没有使用react@它们只是json服务器错误。与此无关。使用React时，您必须通过元素的ref访问元素。请查看一下。利用React、

document.getElementById（“contname”）.value中的状态，

使用此类查询选择器并不好。

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!");
  };