Redux Form Field Arrays——初始化一个特定长度的字段数组

Question

我希望我的表单组件以包含 3 个空字段的字段数组开始。任何人都可以解释如何以这种方式初始化它吗？

我将使用此处文档中提供的示例：https://redux-form.com/7.0.4/examples/fieldarrays/

这里可以看到，原来我们是没有字段的，只有点击相关的按钮才添加，调用onClick={() => fields.push({})}。

我想从三个字段开始，然后允许用户添加更多字段。在 ComponentDidMount 中调用 fields.push 无效。如何初始化具有特定长度的字段对象？

FieldArraysForm.js

import React from 'react'
import { Field, FieldArray, reduxForm } from 'redux-form'
import validate from './validate'

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

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

const renderMembers = ({ fields, meta: { error, submitFailed } }) =>
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>
        Add Member
      </button>
      {submitFailed &&
        error &&
        <span>
          {error}
        </span>}
    </li>
    {fields.map((member, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}
        />
        <h4>
          Member #{index + 1}
        </h4>
        <Field
          name={`${member}.firstName`}
          type="text"
          component={renderField}
          label="First Name"
        />
        <Field
          name={`${member}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"
        />
        <FieldArray name={`${member}.hobbies`} component={renderHobbies} />
      </li>
    )}
  </ul>

const FieldArraysForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="clubName"
        type="text"
        component={renderField}
        label="Club Name"
      />
      <FieldArray name="members" component={renderMembers} />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'fieldArrays', // a unique identifier for this form
  validate
})(FieldArraysForm)

Answer 1

感谢 Redux Form 团队： https://github.com/erikras/redux-form/issues/3640

基本上，它的完成方式是在连接和导出表单时将一组初始值传递给表单，如下所示：

export default reduxForm({
  form: "foo",
  initialValues: {
    rockSingers: ['Axl Rose', 'Brian Johnson']
  },
  onSubmit: values => {
    window.alert( "Submited: \n" + JSON.stringify( values, null, 2 ) );
  }
})( MyForm );

Redux Form Field Arrays——初始化一个特定长度的字段数组

Redux Form Field Arrays-initializing a field array with a specific length

javascript

redux

redux-form

react-redux