如何让表单在 React 中提交后消失

Question

这是网站上的“联系我们”表单。
我希望用户在“成功”后单击“提交”按钮后表单的所有单元格都消失。换句话说，如果提交成功，我不会再呈现表单。由于这是 React，我不希望页面进行老式的重新加载，只要满足条件就可以了。 现在它在提交时的工作方式只有在提交成功时按钮会消失，如果提交失败则不会消失，这可以保持不变。

这是一个表单，它使用带有 Google Apps 脚本的 XML 在提交时发送用户输入的表单数据。这一切都工作正常，并且在“状态”状态中存在与 onSubmit 操作一起使用的东西，这使得条件渲染变得不那么直接。

如果您想对此进行测试以解决问题
因为我不想把我的电子邮件代码放在那里，你应该在 'this.setState({ status: "ERROR" });' 的底部附近设置 'else' 条件来设置 'status' 说 'SUCCESS'因此电子邮件发送功能（底部）中的 if/else 将呈现表单，就好像数据通过并发送了电子邮件一样。我的建议。

下面的代码是组件正常工作的方式，但我解决这个问题的尝试是将 上方的所有单元格存储为变量，如果“状态”> 0，则“返回”它。因为按下按钮之前的状态为“”。这只是导致整个页面重新加载，重新渲染整个 DOM 而没有发送电子邮件。

  import React from 'react';

  export default class MyForm extends React.Component {
    constructor(props) {
      super(props);
      this.submitForm = this.submitForm.bind(this);
      this.state = {
        status: ""
      };
    }
    render() {
      const { status } = this.state;
      return (
        <form
          onSubmit={this.submitForm}
          action="https://script.google.com/macros/s/000000AKfycbz000000000C0/exec"
          method="POST"
        >
              <div className="row_10" style={{"margin-top": "30px"}}>
                <div className="col-25">
                </div>
                <div className="col-75">
                  <input type="text" id="name" name="Name" placeholder="Name:"/>
                </div>
              </div>
              <div className="row_10">
                <div className="col-25">
                </div>
                <div className="col-75">
                  <input type="text" id="Phone" name="Phone" placeholder="Phone:"/>
                </div>
              </div>
              <div className="row_10">
                <div className="col-25">
                </div>
                <div className="col-75">
                  <input type="text" id="Email" name="Email" placeholder="Email:"/>
                </div>
              </div>
              <div className="row_10">
                <div className="col-25">
                </div>
              </div>
              <div className="row_10">
                <div className="col-25">
                </div>
                <div className="row_10">
                  <textarea className="col-75_T" id="subject" name="subject"  placeholder="How can we help you?" style={{"height": "190px"}}></textarea>
                </div>
              </div>
              <div className="subm_button">
                <div className="col-25">
                </div>
                </div>
              {status === "SUCCESS" ? <p>Thank you! We will talk to you soon!</p> :<a href=""><input onClick="fbq('track', 'Contact');" type="submit" value="Submit"/></a>}
              {status === "ERROR" && <p>Ooops! There was an error.</p>}
        </form>
      );
    }
    submitForm(ev) {
      ev.preventDefault();
      const form = ev.target;
      const data = new FormData(form);
      const xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.setRequestHeader("Accept", "application/json");
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== XMLHttpRequest.DONE) return;
        if (xhr.status === 200) {
          form.reset();
          this.setState({ status: "SUCCESS" });
        } else {
          this.setState({ status: "ERROR" });
        }
      };
      xhr.send(data);
    }
  }

Answer 1

将与消息相同的逻辑应用于表单

renderForm() {
  return (
    <form
      onSubmit={this.submitForm}
      action="https://script.google.com/macros/s/000000AKfycbz000000000C0/exec"
      method="POST"
    >
          <div className="row_10" style={{"margin-top": "30px"}}>
            <div className="col-25">
            </div>
            <div className="col-75">
              <input type="text" id="name" name="Name" placeholder="Name:"/>
            </div>
          </div>
          <div className="row_10">
            <div className="col-25">
            </div>
            <div className="col-75">
              <input type="text" id="Phone" name="Phone" placeholder="Phone:"/>
            </div>
          </div>
          <div className="row_10">
            <div className="col-25">
            </div>
            <div className="col-75">
              <input type="text" id="Email" name="Email" placeholder="Email:"/>
            </div>
          </div>
          <div className="row_10">
            <div className="col-25">
            </div>
          </div>
          <div className="row_10">
            <div className="col-25">
            </div>
            <div className="row_10">
              <textarea className="col-75_T" id="subject" name="subject"  placeholder="How can we help you?" style={{"height": "190px"}}></textarea>
            </div>
          </div>
          <div className="subm_button">
            <div className="col-25">
              <a href=""><input onClick="fbq('track', 'Contact');" type="submit" value="Submit"/></a>
            </div>
            </div>
    </form>
  );
}

render() {
  const { status } = this.state;
  const submitted = status === "SUCCESS";
  return (
    <>
      {!submitted && this.renderForm()}
      {submitted && <p>Thank you! We will talk to you soon!</p>}
      {status === "ERROR" && <p>Ooops! There was an error.</p>}
    </>
  );
}