初始为一个字段的字段数组

Question

我正在尝试使用字段数组的概念，因为在我的应用程序中，用户应该能够为同一类型的字段填写多个值。我可以按照 redux-form 字段数组示例来做，但是，在一个示例中，没有初始字段，我们必须先单击添加成员，然后我们才能让字段填充值，但我最初需要一个字段，然后如果用户需要，可以添加更多字段。

我尝试了 redux-form 示例，但它根本不允许我输入值。这是演示

https://codesandbox.io/s/n47qr2pvzl

该字段值的格式应该是这样的

general: {
 general_information: {
  members: [
   {
     name: ''
   },
   {
     name: ''
   }
]
}
}

这是代码

const renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>
        Add Member
      </button>
      {(touched || 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}.name`}
          type="text"
          component={renderField}
          label="Name"
        />
      </li>
    ))}
  </ul>
);

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

Answer 1

根据 Redux-Form，我们可以通过指定它来设置初始字段（在您的情况下）：

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
  validate,
  initialValues: {"general": {
    "general_information": {
      "members": [
        {}
      ]
    }
  }
  }
})(FieldArraysForm);

这里是直播demo

希望对您有所帮助:)

初始为一个字段的字段数组

Field array with one field at initial

javascript

reactjs

redux-form