antd3.x中如何使用validateStatus（react函数组件）

需求：form表单中有一个FormItem包裹了两个被 getFieldDecorator装饰过的child,要求同时对这两个子元素进行校验并显示校验文案（input框及前缀）。

解决方案：由于help,required,validateStatus无法自动生成，所以需要手动给FormItem加上需要的属性，并且用validator自定义校验，下面是部分示例代码。

<FormItem
              label="网络地址"
              help={status.preInput && status.preBefore ? '' : help}
              validateStatus={
                status.preInput && status.preBefore ? 'success' : 'error'
              }
            >
              {getFieldDecorator('domain', {
                initialValue: appVisible.dataSource?.domain,
                rules: [
                  {
                    validator: validInput,
                  },
                ],
              })(
                <Input
                  addonBefore={getFieldDecorator('scheme', {
                    initialValue: appVisible.dataSource?.scheme,
                    rules: [
                      {
                        validator: validBefore,
                      },
                    ],
                  })(
                    <Select
                      style={{ width: 100 }}
                      allowClear
                      placeholder="选择协议"
                      onChange={(val: any) => {
                        setFieldsValue({
                          cert: val === 'http' ? '' : getFieldValue('cert'),
                        });
                      }}
                    >
                      <Option value="https">https</Option>
                      <Option value="http">http</Option>
                    </Select>,
                  )}
                  placeholder="请输入外网域名"
                />,
              )}
            </FormItem>

自定义校验函数

const validInput = (rule: any, value: any, callback: any) => {
      const pattern = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
      const str = '该项为必填项';
      const str1 = '请输入正确的域名地址';
      if (!value) {
        setHelp(str);
        setStatus({ ...status, preInput: false });
        callback(str);
      } else if (!pattern.test(value)) {
        setHelp(str1);
        setStatus({ ...status, preInput: false });
        callback(str1);
      } else {
        setStatus({ ...status, preInput: true });
        callback();
      }
    };
const validBefore = (rule: any, value: any, callback: any) => {
      const str = '该项为必填项';
      if (!value) {
        setHelp(str);
        setStatus({ ...status, preBefore: false });
        callback(str);
      } else {
        setStatus({ ...status, preBefore: true });
        callback();
      }
    };