Reactjs 验证取决于使用Availability reactstrap验证的两个输入

我有一个带有两个AvField:s的表单，验证规则是这两个字段中的任何一个都必须有一个值

问题是，如果我将tab向前移动到b并输入一个值，则验证错误只会针对输入b清除。请参阅下面的代码：

<AvForm model={model}>
  <AvGroup>
    <Label id="aLabel" for="a">     
    </Label>
    <AvField
      type="text"
      name="a"
      validate={{ async: this.validateOneOutOfTwoHasText }} />
  </AvGroup>
  <AvGroup>
    <Label id="bLabel" for="b">     
    </Label>
    <AvField
      type="text"
      name="b"
      validate={{ async: this.validateOneOutOfTwoHasText }} />
  </AvGroup>
</AvForm>

有人知道我应该做什么来触发a的重新验证，一旦B的验证是确定的吗

---

我用jHipster标记了这个问题，因为我正在使用的代码是由jHipster 5.0.0 beta0生成的。

目前，这在库中本机是不可能的（但有一个解决方法）。每个字段只验证自身，更改只触发自身的验证。 没有一个很好的解决办法来让它工作。您必须获取表单的引用，当一个输入发生更改时，通过

formRef.validateInput（'other-input-name'）

触发对另一个输入的验证。见：

import React，{Component}来自'React'；
从“reactstrap”导入{Button，Label，FormGroup}；
从“可用性验证”导入{AvForm、AvField、AvGroup、AvInput、AvRadio、AvFeedback}；
常量aAndOrB=（值，ctx）=>{
如果（！ctx.a&&！ctx.b）{
返回“您至少需要以a或b格式提供数据”；
}
返回true；
}
类示例扩展组件{
状态={}；
onValidSubmit=（事件、值）=>{
this.setState（{values}）；
};
onInvalidSubmit=（事件、错误、值）=>{
this.setState（{errors，values}）；
};
validateA=（）=>{
此.form.validateInput（'a'）；
}
validateB=（）=>{
此.form.validateInput（'b'）；
}
render（）{
const{errors，values}=this.state；
返回(
（this.form=c）}onValidSubmit={this.onValidSubmit}onInvalidSubmit={this.onInvalidSubmit}>
提交


{errors&&errors.length&&errors:{JSON.stringify（errors，null，2）}
{values&&values:{JSON.stringify（values，null，2）}
)
}
}
导出默认示例；

这是一个很好的解决方法，因为它就像一个符咒！我让你的答案成为公认的答案，非常感谢！

validateOneOutOfTwoHasText(value, ctx, input, cb) {
  if (!ctx.a && !ctx.b) {
    return "You need to provide data in a least a or b";
  }
  return true;
}

import React, { Component } from 'react';
import { Button, Label, FormGroup } from 'reactstrap';
import { AvForm, AvField, AvGroup, AvInput, AvRadioGroup, AvRadio, AvFeedback } from 'availity-reactstrap-validation';

const aAndOrB = (value, ctx) => {
  if (!ctx.a && !ctx.b) {
    return "You need to provide data in a least a or b";
  }
  return true;
}

class Example extends Component {
  state = {};
  onValidSubmit = (event, values) => {
    this.setState({values});
  };
  onInvalidSubmit = (event, errors, values) => {
    this.setState({errors, values});
  };
  validateA = () => {
    this.form.validateInput('a');
  }

  validateB = () => {
    this.form.validateInput('b');
  }
  render() {
    const { errors, values } = this.state;
    return (
      <div>
        <AvForm ref={c => (this.form = c)} onValidSubmit={this.onValidSubmit} onInvalidSubmit={this.onInvalidSubmit}>
          <AvField label="Label for A" name="a" validate={{myValidation: aAndOrB}} onChange={this.validateB} />
          <AvField label="Label for B" name="b" validate={{myValidation: aAndOrB}} onChange={this.validateA} />
          <Button>Submit</Button>
        </AvForm>
        <br />
        {errors && errors.length && <pre>Errors: {JSON.stringify(errors, null, 2)}</pre>}
        {values && <pre>Values: {JSON.stringify(values, null, 2)}</pre>}
      </div>
    )
  }
}

export default Example;