如何在React组件中点击提交按钮后重置表单字段值？

你现在用的是非受控表单实现，reset()方法不生效的核心原因是调用时机不对，或者没有正确拿到表单DOM引用，按下面两种方案修改都可以实现提交后清空表单：

方案1：沿用现有非受控写法（改动最小） #

原生DOM的form.reset()方法本身是有效的，你只需要把清空操作放到emailjs.sendForm的异步回调中，避免异步请求没完成就提前操作的问题，修改后的sendEmail函数如下：

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

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

  emailjs.sendForm(serviceId, templateId, form.current, userId)
    .then((result) => {
        console.log(result.text);
        // 方式1：用你定义的ref操作表单，和方式2选一种即可
        form.current.reset();
        // 方式2：用事件对象拿到表单元素
        // e.target.reset();
    }, (error) => {
        console.log(error.text);
    });
};

非受控表单的reset()方法会直接把所有表单输入项重置为初始值，你现在的输入项没有设置默认值，调用后会直接清空所有内容。

方案2：改为React受控表单（更灵活，可扩展性更高） #

如果后续需要对表单做校验、动态修改值等操作，推荐改成受控组件写法，通过state管理表单值：

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

const Contact = () => {
  // 定义state存储表单字段
  const [formData, setFormData] = useState({
    fromName: '',
    fromEmail: '',
    message: ''
  });

  // 表单输入同步更新state
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({...prev, [name]: value}));
  };

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

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

    emailjs.send(serviceId, templateId, formData, userId)
      .then((result) => {
          console.log(result.text);
          // 提交成功后清空state，表单自动同步清空
          setFormData({
            fromName: '',
            fromEmail: '',
            message: ''
          });
      }, (error) => {
          console.log(error.text);
      });
    };

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

export default Contact

内容的提问来源于stack exchange，提问作者dulongj