React中Bootstrap表单提交前提前显示验证消息，需求优化求助

这个问题我之前也碰到过，核心就是要跟踪每个输入框是否被用户触碰过——也就是添加一个touched状态来记录字段的交互情况。下面是具体的修改方案，结合你的代码逻辑来调整：

1. 新增touched状态跟踪字段交互 #

首先在组件的state里添加一个touched对象，用来记录每个字段是否被用户点击/触碰过：

constructor(props) {
  super(props);
  this.state = {
    hospital_data: { /* 你的初始表单数据 */ },
    errors: {}, // 存储验证错误
    touched: {} // 新增：记录字段是否被触碰
  };
}

2. 添加handleBlur事件标记字段为已触碰 #

当输入框失去焦点时，标记该字段为已触碰：

handleBlur = (fieldName) => () => {
  this.setState(prevState => ({
    touched: { ...prevState.touched, [fieldName]: true }
  }));
};

3. 给输入框绑定onBlur事件 #

在每个表单输入组件上绑定handleBlur，传入对应的字段名：

<input
  type="text"
  name="hospitalName"
  value={this.state.hospital_data.hospitalName}
  onChange={this.handleChange} // 你原来的change事件
  onBlur={this.handleBlur('hospitalName')} // 新增绑定
  className={this.state.touched.hospitalName && this.state.errors.hospitalName ? 'error-input' : ''}
/>

4. 修改错误消息显示逻辑 #

只有当字段已被触碰且存在验证错误时，才显示错误提示：

{/* 医院名称错误提示 */}
{this.state.touched.hospitalName && this.state.errors.hospitalName && (
  <div className="error-message">{this.state.errors.hospitalName}</div>
)}

5. 提交时强制显示所有错误 #

如果用户直接点击提交按钮，我们需要把所有字段标记为已触碰，确保所有错误都显示出来：

handleSubmit = (e) => {
  e.preventDefault();
  
  // 执行表单验证
  const errors = this.validateForm(this.state.hospital_data);
  
  if (Object.keys(errors).length > 0) {
    // 标记所有字段为已触碰
    const allTouched = Object.keys(this.state.hospital_data).reduce((acc, field) => {
      acc[field] = true;
      return acc;
    }, {});
    
    this.setState({ errors, touched: allTouched });
    return;
  }
  
  // 验证通过，执行提交逻辑
  // ...
};

// 你的表单验证函数示例
validateForm = (data) => {
  const errors = {};
  if (!data.hospitalName.trim()) errors.hospitalName = '医院名称不能为空';
  if (!data.email || !/\S+@\S+\.\S+/.test(data.email)) errors.email = '请输入有效的邮箱地址';
  // 其他字段的验证规则...
  return errors;
};

这样调整后，只有用户点击过某个输入框（或者提交表单时），对应的错误消息才会显示，完全符合你的需求。

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