如何通过按下按钮重置 React 组件中的表单值？

Question

I'm using the below Contact component to handle a simple form in react to send an email. I want the sendEmail function to also clear the form fields but I've tried referencing them through form.current and that doesnt seem to be working. Is there another way I need to reference them to set the values? I also tried e.target.reset() and it didn't seem to do anything.

import React, { useRef } from 'react';
import emailjs from 'emailjs-com';

const Contact = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    const serviceId='...';
    const templateId='...';
    const userId='...';

    emailjs.sendForm(serviceId, templateId, form.current, userId)
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
    };

    return (
        <form onSubmit={sendEmail} ref={form}>
            <div className="field half first">
                <label htmlFor="name">Name</label>
                <input type="text" name="fromName" id="name"/>
            </div>
            <div className="field half">
                <label htmlFor="email">Email</label>
                <input type="text" name="fromEmail" id="email"/>
            </div>
            <div className="field">
                <label htmlFor="message">Message</label>
                <textarea name="message" id="message" rows="4"
                placeholder = "..."></textarea>
            </div>
            <ul className="actions">
                <li>
                    <input type="submit" value="Send Message" className="special"/>
                </li>
            </ul>
        </form>
    );
};

export default Contact

Answer 1

There are so many ways to doing this, basically on how the component has been structured to collect the data. However, following your pattern of arrangement, why don't you set a boolean variable or something coercible to a boolean value (value initially set to false) that is made aware (ie value changes to true or 'sent') when the email has been successfully sent.

import {useState} from "react";
const [emailStatus, setEmailStatus] = useState("Not sent");

Then use the useEffect-hook to re-render the component, whenever the emailStatus variable changes to true or 'sent' and thereby clear-out the form values.
Hence, in your function:

emailjs.sendForm(serviceId, templateId, form.current, userId)
      .then((result) => {
          .... any other logic
          console.log(result.text);
          setEmailStatus('sent');
          ................

useEffect(() => {
    //clear form fields here
}, [emailStatus]);

return(
     .....
     .....
);