Массив полей с одним полем в начале - PullRequest
Новая
       6

Массив полей с одним полем в начале

0 голосов
/ 06 января 2019

Я пытаюсь использовать концепцию массива полей, потому что в моем приложении пользователь должен иметь возможность заполнить несколько значений для одного и того же вида поля. Я мог бы поступить так же, как в примере с массивом полей избыточной формы, однако в примере нет начального поля, которое мы должны сначала щелкнуть на элементе добавления, а затем только у нас может быть поле для заполнения значения, но сначала мне нужно одно поле, а затем добавить дополнительное поле, если пользователь хочет.

Я попытался из примера с избыточной формой, но это не позволило мне вообще ввести значение. Вот демо

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>
  );
};

1 Ответ

0 голосов
/ 06 января 2019

Согласно Redux-Form, мы можем установить начальные поля, указав их следующим образом (в вашем случае): 

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

Вот живой демо

Надеюсь, это поможет:)

...