Question

已经两天苦苦挣扎。在＆＃39; redux-form＆＃39;表单，我需要预先填充一个带有array.map迭代索引值的订单字段。这是我的表格的完整代码（请参阅评论）：

const renderField = ({ input, label, type, meta: { touched, error } }) => {
  let color = 'normal';
  if (touched && error) {
    color = 'danger';
  }

  return (
    <FormGroup color={color}>
      <Label>{label}</Label>
      <div>
        <input {...input} type={type} placeholder={label} />
        {touched && (error && <FormFeedback>{error}</FormFeedback>)}
      </div>
    </FormGroup>
  );
};

const renderChoices = ({ fields, meta: { error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>
        Add Choice
      </button>
    </li>
    {fields.map((choice, index) => (
      <li key={index}>
        <button type="button" title="Remove Choice" onClick={() => fields.remove(index)}>
          x
        </button>
        <Field name={choice} type="text" component={renderField} label={`Choice #${index + 1}`} />
      </li>
    ))}
    {error && <li className="error">{error}</li>}
  </ul>
);

const renderQuestion = ({ fields, meta: { error, submitFailed } }) => (
  <ul>
    <li>
      <Button type="button" onClick={() => fields.push({})}>
        Add Question
      </Button>
      {submitFailed && error && <span>{error}</span>}
    </li>
    {fields.map((question, index) => (
      <li key={index}>
        <button type="button" title="Remove Question" onClick={() => fields.remove(index)}>
          x
        </button>
        <h4>Question #{index + 1}</h4>
        <Field // this is the field that needs to be prepopulated
          name={`${question}.order`}
          type="text"
          component={renderField}
          label="Order"
        />
        <Field name={`${question}.prompt`} type="text" component={renderField} label="Prompt" />
        <FieldArray name={`${question}.choices`} component={renderChoices} />
      </li>
    ))}
  </ul>
);

const QuizStepAddForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field name="order" type="number" component={renderField} label="Quiz Order" />
      <Field name="title" type="text" component={renderField} label="Quiz Title" />
      <FieldArray name="questions" component={renderQuestion} />
      <div>
        <Button style={{ margin: '10px' }} color="primary" type="submit" disabled={submitting}>
          Submit
        </Button>
        <Button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </Button>
      </div>
    </Form>
  );
};

export default reduxForm({
  form: 'quizStepAddForm',  
})(QuizStepAddForm);

我尝试使用redux-form Field API meta props，meta:initial来初始化字段，但只需在Field标记中设置它就不会改变任何内容。我还尝试按以下方式input:defaultValue设置<Field input={{ defaultValue: '${index + 1}' }}...。这种尝试虽然改变了包装输入组件的初始值，但仍然以某种方式影响了字段的状态，字段中的任何更改都不会对表单状态产生任何影响。

我错过了什么？

Answer 1

为了在redux表单中设置值的初始状态，您需要将initialValues属性提供给redux form wrapped component：

//... your code above

export default compose(
  connect(state => ({
    // here, you are having an access to the global state object, so you can
    // provide all necessary data as the initial state of your form
    initialValues: {
      someField: "initial value"
    }
  })),
  reduxForm({
    form: "quizStepAddForm"
  })
)(QuizStepAddForm);

如何以编程方式初始化单个redux-form字段？

1 个答案: