Question

我正在为项目中的所有表单使用Redux Form模块。我想基于组件道具创建验证。每个行都有一个表格，其中包含一些字段。 The table 第一个字段是所有来自商店的产品的下拉列表。每个产品都有可用数量，如果字段数量超过可用数量，则Redux表单应返回特定行的错误。我无法在reduxForm方法中传递的validate函数中执行此操作：

reduxForm({
  validate,
  form: 'theNameOfTheForm'
})

我无法在validate函数中进行表验证的原因是因为它无法看到组件的当前道具（我找不到如何做到这一点的方法）。我决定将validate函数作为道具传递给FieldArray组件：

// some methods

validate(values) {
    // some validation code
}

render() {
    return (
        <FieldArray validate={this.validate} />
    )
}

从validate方法我可以访问组件道具但是无论我从这个方法返回什么，在作为field道具传递的组件中的component道具都没有收到错误<FieldArray />。

return 'Some error message';

return ['Some error message'];

return {
    products: 'Some error message'
};

return {
    products: ['Some error message']
};

<FieldArray validate={this.validate} component={FieldArrayComponent} />

const FieldArrayComponent = ({ field, meta }) => {};

我如何进行验证？难道我做错了什么？还有其他方法可以进行验证吗？

Answer 1

使用HOC（高阶组件）时，可以将组件props传递给validate函数，并在main validate函数中进行验证（无需在组件中创建方法，然后将其传递给FieldArray组件）。只需像这样导出组件：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({
    validate,
    form: 'ExampleForm'
  })(ExampleForm)
);

组件道具在验证函数中作为第二个参数传递：

const validate = (values, props) => {
  const errors = {};

  return errors;
};

Redux表单字段数组验证

1 个答案: