1

我挣扎了几个小时来处理一项任务。我有一个来自材料 ui 的 redux 表单文本字段，我像这样使用它：

<Field
          id="searchCif"
          name="searchCif"
          component={TextField}
          floatingLabelText={SEARCHVIEW_HINT_CIF}
          disabled={(afm !== undefined)}
          validate={[requireValidator, onlyNumeric]}
        />

validate 属性将两个函数作为参数：

const requireValidator = (value, intl) => (
  value === undefined ? intl.formatMessage({ id: 'error.search.cif.afm' }) :
    undefined
);

const onlyNumeric = (value, intl) => (
  (value !== undefined && !(/^([0-9])+$/g).test(value)) ?
    intl.formatMessage({ id: 'error.search.cif.afm.only.number' }) :
    undefined
);

我使用 intl 因为我的信息应该被翻译。但是一个错误显示intl.formatted message is not a function。因此我写道： validate={() => [requireValidator(value, intl), onlyNumeric(value, int)]}。错误未显示，但验证无法正常工作。有任何想法吗？？

4

1 回答 1

1

您的验证函数无法正常工作，因为 Validate 道具需要一个具有 value 和 allValues 参数的函数。将该函数包装在另一个函数中以传入您的附加参数。

const requireValidator = intl => value => (
    (value === undefined) ? 
    intl.formatMessage({ id: 'error.search.cif.afm' }) : undefined
);

const requireValidatorInternationalized = requireValidator(intl);

const onlyNumeric = intl => value => (
  (value !== undefined && !(/^([0-9])+$/g).test(value)) ?
    intl.formatMessage({ id: 'error.search.cif.afm.only.number' }) :
    undefined
);

const onlyNumericInternationalized = onlyNumeric(intl);

<Field
      id="searchCif"
      name="searchCif"
      component={TextField}
      floatingLabelText={SEARCHVIEW_HINT_CIF}
      disabled={(afm !== undefined)}
      validate={[requireValidatorInternationalized, onlyNumericInternationalized]}
    />

Erikras（redux-form 存储库的所有者和主要贡献者）建议定义参数化验证器的单个实例，而不是从 Validate 属性中传递参数，以防止不必要的重新渲染字段（例如，不要做Validate={[requiredValidator(intl), onlyNumeric(intl)]}）。

于 2017-09-23T06:58:31.270 回答