React使用onChange实现表单验证且仅校验通过时更新状态的正确方法

你现有代码存在两个核心问题：

• 只维护了一个全局校验状态，没有存储对应表单字段的实际值，无法实现「校验通过才更新对应字段状态」的要求
• message字段的校验逻辑存在语法错误（缺少左半个括号）

实现思路 #

1. 单独维护表单所有字段的状态集合，校验通过才更新对应字段的值
2. 可选维护错误提示状态，校验不通过时给用户明确反馈，不会修改原有表单值
3. 按字段匹配对应校验规则，逻辑更清晰易维护

完整可运行代码 #

import { useState } from 'react';

function FormDemo() {
  // 存储表单字段值，仅校验通过时更新
  const [formData, setFormData] = useState({
    user_email: '',
    user_name: '',
    message: ''
  });
  // 存储字段错误提示，校验不通过时展示
  const [formErrors, setFormErrors] = useState({
    user_email: '',
    user_name: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    let isFieldValid = false;
    let errorTip = '';

    // 分字段匹配校验规则
    switch(name) {
      case 'user_email':
        // 可根据实际需求替换邮箱校验正则，示例保留你原有规则（要求至少含1位数字）
        isFieldValid = /\d{1}/.test(value);
        errorTip = isFieldValid ? '' : '邮箱需包含至少1位数字';
        break;
      case 'user_name':
        isFieldValid = value.trim() !== '';
        errorTip = isFieldValid ? '' : '用户名不能为空';
        break;
      case 'message':
        isFieldValid = value.trim() !== '';
        errorTip = isFieldValid ? '' : '留言内容不能为空';
        break;
      default:
        break;
    }

    // 仅校验通过时更新对应字段状态
    if (isFieldValid) {
      setFormData(prevState => ({
        ...prevState,
        [name]: value
      }));
      // 清空对应字段错误提示
      setFormErrors(prevState => ({
        ...prevState,
        [name]: ''
      }));
    } else {
      // 校验不通过仅更新错误提示，不修改表单值
      setFormErrors(prevState => ({
        ...prevState,
        [name]: errorTip
      }));
    }
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="user_email"
          value={formData.user_email}
          onChange={handleChange}
        />
        {formErrors.user_email && <p style={{color: 'red', fontSize: '12px'}}>{formErrors.user_email}</p>}
      </div>
      <div style={{margin: '10px 0'}}>
        <label>用户名：</label>
        <input
          type="text"
          name="user_name"
          value={formData.user_name}
          onChange={handleChange}
        />
        {formErrors.user_name && <p style={{color: 'red', fontSize: '12px'}}>{formErrors.user_name}</p>}
      </div>
      <div>
        <label>留言：</label>
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
        />
        {formErrors.message && <p style={{color: 'red', fontSize: '12px'}}>{formErrors.message}</p>}
      </div>
    </form>
  );
}

export default FormDemo;

补充说明 #

如果你的需求是「用户输入时实时显示内容，仅提交时做校验拦截」，只需要把校验逻辑移到onSubmit事件里即可，不需要在onChange里拦截状态更新。如果就是要求校验不通过就不保留输入内容，上述代码完全符合要求。

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