单击提交表单后如何更新我的页面？答案

【问题标题】：how can I update my page after clicking the submit form?单击提交表单后如何更新我的页面？
【发布时间】：2021-03-31 14:39:41
【问题描述】：

提交表单后如何更新状态？我只希望表格再次清晰。我已经可以成功保存在 firestore 中，但页面没有更新。我必须重新加载才能再次清除表单

 const msg = (props) => {
      const [displayName, setdisplayName] = useState("");
      const [email, setEmail] = useState("");
      const [messag, setMessaeg] = useState("");
    
      const handleSubmit = (event) => {
        event.preventDefault();
        try {
          firestore.collection("contac").add({
            displayName: displayName,
            message: message,
          });
          alert("sent successfully");
        } catch (err) {
          console.log(err);
        }
      };
    
      return (
        <div>
          <form onSubmit={handleSubmit}>
            <TextField
              type="text"
              onChange={(e) => setdisplayName(e.target.value)}
            />
           
            <TextField
              type="text"
              onChange={(e) => setMsg(e.target.value)}
            />
            <Button
              type="submit"
            >
              Submit
            </Button>
          </form>

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

添加一些代码标记： //

import React, { useState } from "react";
import { render } from "react-dom";


function App()  {
  let [displayName, setdisplayName] = useState('');
  let [email, setEmail] = useState("");
  let [messag, setMessaeg] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    try {
      firestore.collection("contac").add({
         displayName: displayName,
         message: message,
      });
      alert("sent successfully");
      setdisplayName(''); //<-- Add this
      setEmail(''); //<-- Add this
      setMessaeg(''); //<-- Add this
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={displayName} //<-- Add this
          onChange={(e) => setdisplayName(e.target.value)}
        />
       
        <input
          type="text"
          value={messag} //<-- Add this
          onChange={(e) => setMessaeg(e.target.value)}
        />
        <button
          type="submit"
        >
          Submit
        </button>
      </form>
      </div>
    )
  }

render(<App  />, document.getElementById("root"));

Demo

【讨论】：

【解决方案2】：

我通常会明确清除这些字段，例如：How to clear a form?

但如果您希望重新加载整个页面，您可以使用：window.location.reload()。见How to reload a page using JavaScript

【讨论】：