React中Bootstrap表单提前显示验证信息问题求助

这个问题很常见，核心就是要追踪用户是否已经和某个输入框产生过交互（比如点击、聚焦过），只有当用户触碰过该字段后，才显示对应的错误/状态提示。下面是针对你的类组件场景的具体解决方案：

1. 添加touched状态追踪字段交互情况 #

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

constructor(props) {
  super(props);
  this.state = {
    hospital_data: { /* 你的表单数据 */ },
    errors: {}, // 原来的错误信息对象
    touched: {} // 新增：记录字段是否被触碰
  };
}

2. 编写标记字段为已触碰的方法 #

添加一个方法，用来更新touched状态，标记指定字段为已触碰：

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

3. 修改输入框组件，绑定触碰事件 #

给每个输入框添加onBlur事件（用户点击输入框后再移开焦点时触发），调用上面的方法标记字段为已触碰；同时修改样式和错误信息的渲染逻辑，只有当字段被触碰过且有错误时，才显示错误信息和状态样式：

假设你的一个输入框是医院名称，修改后的代码大概是这样：

<div className="form-group">
  <label>医院名称</label>
  <input
    type="text"
    className={`form-control ${
      this.state.touched.hospitalName 
        ? this.state.errors.hospitalName ? 'is-invalid' : 'is-valid' 
        : ''
    }`}
    value={this.state.hospital_data.hospitalName}
    onChange={(e) => this.handleChange('hospitalName', e.target.value)}
    onBlur={() => this.setFieldTouched('hospitalName')} // 绑定触碰事件
  />
  {/* 只有触碰过且有错误时才显示错误信息 */}
  {this.state.touched.hospitalName && this.state.errors.hospitalName && (
    <div className="invalid-feedback">{this.state.errors.hospitalName}</div>
  )}
</div>

4. 提交表单时标记所有字段为已触碰 #

为了避免用户直接点击提交按钮却看不到任何错误提示，我们需要在提交时把所有字段都标记为已触碰，这样所有不符合规则的字段都会显示错误：

handleSubmit = (e) => {
  e.preventDefault();
  
  // 先标记所有字段为已触碰
  const allFieldsTouched = Object.keys(this.state.hospital_data).reduce((acc, field) => {
    acc[field] = true;
    return acc;
  }, {});
  
  this.setState({ touched: allFieldsTouched }, () => {
    // 执行你的表单验证逻辑
    const errors = this.validate(this.state.hospital_data);
    
    if (Object.keys(errors).length === 0) {
      // 验证通过，处理提交逻辑
      console.log('表单提交成功！');
    } else {
      // 更新错误信息
      this.setState({ errors });
    }
  });
}

这样修改后，未被用户点击过的输入框不会显示任何红绿状态，只有当用户触碰过某个输入框后，才会根据验证结果显示对应的错误提示或成功样式；点击提交按钮时，所有字段都会被标记为已触碰，确保用户能看到所有错误。

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