如何使验证适用于从数组生成的 redux 表单字段

Question

我正在尝试使用 redux-form 生成测验表单。我的单个 redux-form 字段组件的数据源来自数组 - questions 在我的例子中。除了验证之外，一切都按预期工作。有什么想法可以解决这个问题吗？

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Input, Button } from 'reactstrap';

const validate = values => {
  const errors = {};
  if (!values.question) { // this is just an example of what I am trying to do, validation does not work
    errors.question = 'Required';
  } else if (values.question.length < 15) {
    errors.question = 'Must be 15 characters or more';
  }
  return errors;
};

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <Input {...input} type={type} />
      {touched && (error && <span>{error}</span>)}
    </div>
  </div>
);

const renderQuestions = questions => {
  return questions.map(question => {
    return (
      <Field key={question.id} name={question.prompt} type="textarea" component={renderField} label={question.prompt} />
    );
  });
};

const QuizStepForm = props => {
  const { handleSubmit, pristine, reset, submitting, questions } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field name="username" type="textarea" component={renderField} label="username" />
      {renderQuestions(questions)}

      <div>
        <br />
        <Button color="primary" style={{ margin: '10px' }} type="submit" disabled={submitting}>
          Submit
        </Button>
        <Button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </Button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'quizStepForm',
  validate
})(QuizStepForm);

Answer 1

您的验证函数假定有一个名为 "question." 的字段，但您的代码创建了一组名称由 {question.prompt} 设置的字段。如果您坚持使用此实现，您的验证代码将需要了解所有 question.prompt 数组值并检查每个值的 values[question.prompt]，然后为任何失败设置 errors[question.prompt]。这可能会奏效，尽管这似乎是一个次优设计。

这可能是 FieldArray 的一个很好的用例。在 FieldArrays 中，会在每个字段上为您调用验证函数；您的验证码不必知道所有字段的名称。

如何使验证适用于从数组生成的 redux 表单字段

How to make validation to work for redux-form field generated from an array

javascript

reactjs

redux

redux-form