React表单失焦验证异常：单个输入框失焦触发全量错误提示

问题原因 #

当前代码使用了一个全局的focused状态变量，所有输入框的data-focused属性都绑定这个值。只要任意一个输入框触发onBlur事件，所有输入框的data-focused都会变为"true"，此时所有未通过验证的输入框都会显示错误提示，无论用户是否触碰过它们。

解决方案 #

将全局状态改为记录每个字段的触碰状态，确保只有被用户失焦过且验证失败的输入框才显示错误提示：

• 修改状态管理：把单个布尔值状态改为对象，存储每个字段是否被触碰（失焦过）
• 更新失焦处理函数：根据当前失焦的输入框名称，单独更新对应字段的状态
• 绑定对应属性：每个输入框的data-focused属性绑定自身字段的触碰状态

修改后的代码 #

AppForm.jsx

import React, { useState } from 'react'
import DialingCodes from './DialingCodes'
import FileUpload from './FileUpload'

const AppForm = () => {
  // 用对象记录每个字段是否已被触碰
  const [touchedFields, setTouchedFields] = useState({})

  // 接收字段名，更新对应字段的触碰状态
  const handleBlur = (fieldName) => {
    setTouchedFields(prevState => ({ ...prevState, [fieldName]: true }))
  }

  return (
    <>
      <div className='app-card'>
        <img 
          src='../../../../logo/Logo ROASTAR-white.PNG'
          width={150}
        />
        <form className='app-form'>
          <h3>Personal Details</h3>
          <div className='form-content'>
            <div className='first-name'>
              <input
                type='text'
                name='first_name'
                placeholder='First Name'
                autoComplete='given-name'
                pattern='^[A-Za-z]{2,16}$'
                onBlur={() => handleBlur('first_name')}
                data-focused={touchedFields.first_name ? 'true' : 'false'}
                required
              />
              <span>First Name must be at least 2 characters or more</span>
            </div>
            <div className='last-name'>
              <input
                type='text'
                name='last_name'
                placeholder='Last Name'
                autoComplete='family-name'
                pattern='^[A-Za-z]{2,16}$'
                onBlur={() => handleBlur('last_name')}
                data-focused={touchedFields.last_name ? 'true' : 'false'}
                required
              />
              <span>Last Name must be at least 2 characters or more</span>
            </div>
            {/* 其他输入框按相同逻辑修改onBlur和data-focused属性 */}
            ...
          </div>
          ...
        </form>
      </div>
    </>
  )
}

export default AppForm

CSS（无需修改）

.form-content span {
  display: none;
}

.form-content input:invalid[data-focused="true"] ~ span {
  padding-left: 4.3vw;
  text-align: left;
  position: relative;
  top: 2.7em;
  font-size: 12px;
  display: block;
  color: red;
  z-index: 1;
}

效果说明 #

修改后，每个输入框的错误提示只会在该输入框被用户失焦过，且输入内容不符合验证规则时才会显示，彻底解决单个输入框错误导致全局提示的问题。

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