react 中 form表单提示

在使用 react web 的时候，总是喜欢原生写法，这里讲一下，怎么样去掉原生，使用自定义错误提示。

1. 禁用浏览器原生行为 (`noValidate`)

浏览器默认会对带有 required 的输入框弹出气泡。我们在 <form> 标签上添加了 noValidate 属性，告诉浏览器："别管我的校验，我自己来处理 UI。"

tsx 复制代码

/* 在 ToolCategory.tsx 约 363 行 */
<form onSubmit={handleSubmit} noValidate className="...">

2. 手动接管提交逻辑 (`handleSubmit`)

在点击提交按钮时，我们不再依赖浏览器，而是通过代码手动对 formData 中的必填项进行检测，并将结果存入一个状态变量 errors 中：

tsx 复制代码

const [errors, setErrors] = useState<Record<string, boolean>>({}); // 校验错误状态

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault(); // 阻止默认提交
  
  // 生成错误映射表
  const newErrors = {
    name: !formData.name,    // 如果 name 为空，则为 true
    nameEn: !formData.nameEn,
    icon: !formData.icon
  };
  
  setErrors(newErrors); // 更新状态以触发 UI 渲染

  // 如果有任何一个项是 true，就直接返回，不执行后续逻辑
  if (Object.values(newErrors).some(err => err)) return;
  
  // 校验通过后才调接口...
}

3. 数据驱动的 UI 渲染 (条件类名)

我们在输入框的 className 里使用了模板字符串。当 errors.name 为 true 时，动态给输入框穿上"红装"，并在下方渲染提示语：

tsx 复制代码

<input
  /* 动态类名：根据 errors 状态切换边框颜色 */
  className={`border ${errors.name ? 'border-red-500' : 'border-slate-100'}`}
  onChange={(e) => {
    setFormData({...});
    // 用户一旦开始输入，就立即清除该项的红色警告，体验更流畅
    if (errors.name) setErrors({ ...errors, name: false });
  }}
/>

/* 条件渲染：只有报错时才显示这段文字 */
{errors.name && (
  <p className="text-red-500 text-[10px]">请输入中文名称</p>
)}

总结

这种方式的优点是：完全可控。无论是边框的红色深浅、提示文字的位置、还是消失的动画，都可以通过 CSS (Tailwind) 进行精准调整，而不会受不同浏览器（Chrome/Safari/Edge）原生样式的干扰。

react 中 form表单提示

1. 禁用浏览器原生行为 (noValidate)

2. 手动接管提交逻辑 (handleSubmit)

3. 数据驱动的 UI 渲染 (条件类名)

总结

1. 禁用浏览器原生行为 (`noValidate`)

2. 手动接管提交逻辑 (`handleSubmit`)