React表单验证后重置输入值的更优实现方案咨询

下面分两种常用优化方案，可根据你的业务场景选择：

方案1：合并分散的单字段状态为统一表单状态 #

适用于需要实时监听输入、做表单校验/字段联动的受控表单场景：

• 将原来分散的name/email/subject/textarea四个独立useState合并为一个formData状态，统一管理所有表单字段
• 封装通用的输入更新回调，无需为每个输入框单独写更新逻辑
• 重置时直接赋值初始状态即可，无需逐个调用set方法

代码示例：

import { useState, useRef } from 'react';
import emailjs from '@emailjs/browser';

const ContactForm = () => {
  // 统一声明表单初始值
  const initialFormState = {
    name: '',
    email: '',
    subject: '',
    textarea: ''
  }
  const [formData, setFormData] = useState(initialFormState);
  const [message, setMessage] = useState(false);
  const formRef = useRef();

  // 通用输入更新逻辑
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({...prev, [name]: value}));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is')
    .then((result) => {
      console.log(result.text);
    }, (error) => {
      console.log(error.text);
    });

    setMessage(true);
    // 一次调用完成所有字段重置
    setFormData(initialFormState);
  };

  return (
    <div className="contact" id="contact">
      <div className="left">
        <img src="" alt="" />
      </div>
      <div className="right">
        <h2>Kontakt</h2>
        <form ref={formRef} onSubmit={handleSubmit}>
          <label>Name</label>
          <input onChange={handleInputChange} type="text" placeholder="Name" name="name" value={formData.name} />
          <label>Email</label>
          <input onChange={handleInputChange} type="email" placeholder="Email" name="email" value={formData.email} />
          <label>Betreff</label>
          <input onChange={handleInputChange} type="text" placeholder="Subject" name="subject" value={formData.subject} />
          <label>Nachricht</label>
          <textarea onChange={handleInputChange} placeholder="Message" name="textarea" value={formData.textarea} />
          <button type="submit">Send</button>
          {message && <span>Thanks we will respond ASAP.</span>}
        </form>
      </div>
    </div>
  )
}

方案2：利用原生form能力直接重置（非受控模式） #

你已经给表单绑定了ref，如果没有实时校验、字段联动等需求，完全可以不用维护受控状态，直接调用原生表单的reset()方法一键清空所有字段，代码量最少：

代码示例：

import { useState, useRef } from 'react';
import emailjs from '@emailjs/browser';

const ContactForm = () => {
  const [message, setMessage] = useState(false);
  const formRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    
    emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is')
    .then((result) => {
      console.log(result.text);
    }, (error) => {
      console.log(error.text);
    });

    setMessage(true);
    // 原生方法一键重置所有表单字段
    formRef.current.reset();
  };

  return (
    <div className="contact" id="contact">
      <div className="left">
        <img src="" alt="" />
      </div>
      <div className="right">
        <h2>Kontakt</h2>
        <form ref={formRef} onSubmit={handleSubmit}>
          <label>Name</label>
          <input type="text" placeholder="Name" name="user_name" />
          <label>Email</label>
          <input type="email" placeholder="Email" name="user_email" />
          <label>Betreff</label>
          <input type="text" placeholder="Subject" name="user_subject" />
          <label>Nachricht</label>
          <textarea placeholder="Message" name="message" />
          <button type="submit">Send</button>
          {message && <span>Thanks we will respond ASAP.</span>}
        </form>
      </div>
    </div>
  )
}

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