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

您的验证功能假设有一个名为＆＃34;问题的字段。＆＃34;但是您的代码会创建一组字段，其名称由{question.prompt}设置。如果您坚持使用此实现，则验证代码需要知道所有question.prompt数组值并检查每个values[question.prompt]，然后针对任何失败设置errors[question.prompt]。这可能会奏效，虽然它似乎是次优设计。

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

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

1 个答案: