提交表單后從textarea中刪除文本React

Question

一旦用戶單擊提交，我有一個發送 email 的表單，但文本仍保留在文本區域中。 提交表單后，我該怎么做才能清除文本區域？

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() 來實現，但 React 中可能內置了一種更簡單的方法。 任何幫助將不勝感激。

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>

如果只清除文本區域和其他內容，您可以嘗試為文本區域設置 ID 並在您的提交中執行以下操作 function

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