Question

我正在使用redux-form包在react-native中构建一个类似向导的表单，但是并没有像example那样有条件地呈现每个步骤。

某些重要的设计要求：

在具有多个字段的每个步骤都有效之前，将禁用“继续”按钮。
我需要为每个步骤之间的过渡设置动画，并在其下方显示一个动画进度条。

到目前为止，我已将所有不同的步骤内置到水平FlatList组件中并且它可以正常工作，但是，由于其他步骤的字段已呈现且尚未生效，因此我无法禁用Continue按钮使用this.props.invalid标志的每步骤基础，这是我最初尝试做的。在该示例中，启用了每个步骤的提交按钮，允许您提交表单并触发当前步骤的任何待处理验证。

我的问题是：有没有办法对这些单独的字段进行分组并获得某种类型的更新道具以便考虑步骤valid，或者我可以为每个步骤使用不同的表单名称然后合并不同的提交最后一个的步骤/表格？

感谢使用redux-forms对此类设置的任何见解，谢谢！

Answer 1

我使用redux表单getFormSyncErrors选择器解决了我的问题。

import { 
  reduxForm,
  Field,
  getFormSyncErrors 
} from 'redux-form';

首先，您创建的选择器将添加syncErrors道具，其中包含当前未通过同步验证规则的字段数组。

Component = connect(
  state => ({
    syncErrors: getFormSyncErrors('formName')(state)
  })
)(Component);

然后在我的组件中，我比较了当前步骤需要验证的字段，并检查它们在syncErrors数组中的存在。如果当前步骤没有错误，则会启用Continue按钮。

render(){
  const { syncErrors } = this.props;
  const fields = ['first_name', 'last_name', 'email'];
  const errorFields = syncErrors ? Object.keys(syncErrors) : [];
  const hasErrors = fields.some(el => errorFields.indexOf(el) >= 0);

  return(
    {...Fields}
    <ActionButton
      text='Continue'
      handleButtonPress={this.goToStep}
      disabled={this.props.pristine || hasErrors}
    />
  )
}

我可以在向导类型表单中进行多次验证吗？

1 个答案: