表单提交反应后，从textarea中删除文本

Question

一旦用户单击提交，我的表格即将发送电子邮件，但文本仍留在文本区域中。一旦提交表格，我该怎么办才能清除文本方面？

import "./contact.css";
import phone from "../../img/phone.png";
import email from "../../img/email.png";
import github from "../../img/github.png";
import link from "../../img/link.png";
import resume from "../../img/resume.png";
import { useRef, useState } from "react";
import emailjs from "@emailjs/browser";

const Contact = () => {
  const formRef = useRef();
  const [done, setDone] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    emailjs
      .sendForm(
        "service_fh7vxks",
        "template_z5wczcw",
        formRef.current,
        "mhYkqvVVsQZ1u1ogA"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <div className="c">
      <div className="c-bg"></div>
      <div className="c-wrapper">
        <div className="c-left">
          <h1 className="c-title">Let's talk</h1>
          <div className="c-info">
            <div className="c-info-item">
              <img src={phone} alt="" className="c-icon" />
              +61 490 522 328
            </div>
            <div className="c-info-item">
              <img src={email} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={resume} alt="" className="c-icon" />
              CV
            </div>
            <div className="c-info-item">
              <img src={github} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={link} alt="" className="c-icon" />
              
                linkedin.com/in/tobias-bedford
              </a>
            </div>
          </div>
        </div>
        <div className="c-right">
          <p className="c-description">
            <b>Who are you?</b> Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Vel provident ex quis adipisci quidem magni hic
            eos quae deleniti dignissimos sequi rerum nam atque reprehenderit
            et, odio ad? Aliquam, repellat.
          </p>
          <form ref={formRef} onSubmit={handleSubmit}>
            <input type="text" placeholder="name" name="user_name" />
            <input type="text" placeholder="subject" name="user_subject" />
            <input type="text" placeholder="email" name="user_email" />
            <textarea rows="5" placeholder="message" name="message"></textarea>
            <button>Submit</button>
            {done && "Thank you..."}
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

我相信通过使用setState（）可能是有可能的，但是尽管可能有一种更简单的方法。任何帮助将不胜感激。

Answer 1

确实，我将使用usestate为此。您可以使用默认消息保存声明值，使用onChange处理程序更新值，然后在提交表单后将其清除。

  const [done, setDone] = useState(false);
  const [textMessage, setTextMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    emailjs
      .sendForm(
        "service_fh7vxks",
        "template_z5wczcw",
        formRef.current,
        "mhYkqvVVsQZ1u1ogA"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
          setTextMessage('');
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

const handleChange = (e) => {
     setTextMessage(e.target.value);
}

//...then in your form, use defaultValue and onChange:
<textarea rows="5" defaultValue={textMessage} //OR 
 value={textMessage} onChange={handleChange} placeholder="message" name="message"></textarea>

Answer 2

您可以为表格设置ID并在提交成功的同时将其重置，

//function
const handleSubmit = (event) => {
  document.getElementById('my_form').reset();
}

//form
<form id='my_form'>
   {--code here --}
</form>

如果仅清楚textarea和其他保留，您可以尝试为文本区域设置ID，并在您的提交功能中进行以下操作

//function
const handleSubmit = (event) => {
  document.getElementById('textarea_id').value = '';
}