availity-reactstrap-validation双AvField二选一验证：仅单个字段错误清除异常

这个问题我之前也碰到过！核心原因是availity-reactstrap-validation默认只会触发当前修改字段的验证逻辑，当你在字段b输入内容后，只有b的验证会重新执行，字段a的验证状态还是停留在之前的错误结果，所以错误提示不会消失。

下面是具体的修复方案，分步骤来：

1. 添加表单引用，方便手动触发验证 #

首先在组件里创建一个表单的ref，这样我们可以手动调用表单的字段验证方法：

constructor(props) {
  super(props);
  this.formRef = React.createRef();
  // 假设你的model存在state中
  this.state = {
    model: { a: '', b: '' }
  };
}

然后把ref绑定到AvForm上：

<AvForm ref={this.formRef} model={this.state.model}>
  {/* 你的AvGroup和AvField放在这里 */}
</AvForm>

2. 自定义字段变更事件，触发另一个字段的验证 #

写一个统一的change处理函数，每当任意一个字段修改时，不仅更新model，还要触发另一个字段的验证：

handleFieldChange = (e) => {
  const { name, value } = e.target;
  // 先更新state里的model
  this.setState(
    prevState => ({
      model: { ...prevState.model, [name]: value }
    }),
    // 状态更新后，触发另一个字段的验证
    () => {
      const otherFieldName = name === 'a' ? 'b' : 'a';
      if (this.formRef.current) {
        // 调用表单的validateField方法，重新验证另一个字段
        this.formRef.current.validateField(otherFieldName);
      }
    }
  );
};

然后把这个函数绑定到两个AvField的onChange属性上：

<AvField
  type="text"
  name="a"
  onChange={this.handleFieldChange}
  validate={{ async: this.validateOneOutOfTwoHasText }}
/>
<AvField
  type="text"
  name="b"
  onChange={this.handleFieldChange}
  validate={{ async: this.validateOneOutOfTwoHasText }}
/>

3. 确保验证逻辑正确判断两个字段的状态 #

你的异步验证函数需要正确读取整个model的状态，判断是否至少有一个字段有值：

validateOneOutOfTwoHasText = (value, ctx) => {
  const { a, b } = ctx.model;
  // 如果两个字段都为空，返回错误
  if (!a.trim() && !b.trim()) {
    return Promise.reject('至少需要填写其中一个字段');
  }
  // 否则验证通过
  return Promise.resolve();
};

原理说明 #

这样修改后，当你在字段b输入内容时：

1. 先更新state里的model，把b的值保存下来
2. 然后手动触发字段a的验证，这时候验证函数会读取到已经有值的b，所以会返回验证通过，字段a的错误提示就会消失了

同理，当你清空b字段时，也会重新验证a，确保错误提示能正确显示。

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