Как использовать массив полей Redux-Form с входами типа файла - PullRequest
Новая
       1

Как использовать массив полей Redux-Form с входами типа файла

0 голосов
/ 01 марта 2019

В избыточной форме при создании массива полей для входов type="file" вместо удаления удаляется Fields.remove(index).

Я думал, что это может быть связано с использованием key={index}, как обсуждалось в # 2666 на github , но использование уникально сгенерированного ключа не исправляет эту ошибку.

Как мне заставить Fields.remove(index) правильно работать с массивом input type="file"? 

import React from "react";
import { reduxForm, Field, FieldArray } from "redux-form";

const Guid = () => {
  const s4 = () =>
    Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  return `${s4()}`;
};

const renderField = ({ fields, input, handleDelete, index, label }) => (
  <div>
    <input type="file" {...input} />
    <label>
      {" "}
      - id: {label}, index = {index}
    </label>
  </div>
);

const renderFieldList = ({ fields }) => (
  <div>
    {fields.map((field, index) => {
      const { id } = fields.get(index);
      return (
        <div key={index}>
          <Field
            name={field}
            component={renderField}
            index={index}
            label={id}
          />
          <button type="button" onClick={() => fields.remove(index)}>
            Delete
          </button>
        </div>
      );
    })}

    <button type="button" onClick={() => fields.push({ id: Guid() })}>
      Add
    </button>
  </div>
);

const MyForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <FieldArray name="foo" component={renderFieldList} />
  </form>
);

export default reduxForm({
  form: "form",

  onSubmit: values => {
    window.alert(JSON.stringify(values, null, 2));
  }
})(MyForm);

Пример

...