React Input组件条件必填验证问题求助：仅填写后需校验

要实现「输入框仅在用户填写过（触发过输入操作）后才变为必填项」的需求，核心是要区分用户是否触碰过该字段，而不是只判断字段当前是否有值。你当前的email ? err?.email : null逻辑只在字段有值时才考虑错误，无法满足需求。

具体实现方案： #

1. 跟踪已触碰字段：添加状态记录哪些字段被用户操作过
2. 标记触碰状态：在输入变更时，更新对应字段的触碰状态
3. 条件触发校验：仅当字段已触碰时，才校验必填规则并显示错误

修改后的完整代码示例： #

首先在组件中添加状态：

import { useState } from 'react';

// 组件内部
const [email, setEmail] = useState('');
const [touchedFields, setTouchedFields] = useState({});
const [err, setErr] = useState({});

更新输入处理函数，同时标记字段触碰状态：

const handleChange = (e) => {
  const { name, value } = e.target;
  setEmail(value);
  // 标记当前字段为已触碰
  setTouchedFields(prev => ({ ...prev, [name]: true }));
  
  // 实时校验（可选，也可在提交时校验）
  validateField(name, value);
};

// 字段校验函数
const validateField = (name, value) => {
  const newErr = { ...err };
  if (name === 'email' && touchedFields.email) {
    // 仅当字段已触碰时，校验必填
    newErr.email = !value ? 'Email is required' : null;
  }
  setErr(newErr);
};

调整Input组件的props：

<Input
  type="email" // 修正type为email（原代码type="label"是错误的）
  id="email"
  name="email"
  value={email}
  onChange={handleChange}
  label={'Email'}
  placeholder={'Enter your email'}
  // 仅当字段已触碰且存在错误时显示错误信息
  error={touchedFields.email ? err?.email : null}
  invalid={touchedFields.email && !!err?.email}
/>

关键逻辑说明： #

• touchedFields对象用来记录用户是否操作过某个输入框，避免对未触碰的字段触发必填校验
• 校验逻辑仅在字段被触碰后才执行，即使用户后来清空了输入内容，依然会校验必填规则
• 修正了原代码中type="label"的错误，邮箱输入框应使用type="email"

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