Добавьте несколько файлов с помощью функции onChange и React Hooks, но по отдельности - PullRequest
Новая
       26

Добавьте несколько файлов с помощью функции onChange и React Hooks, но по отдельности

1 голос
/ 11 июля 2020

Мне нужно добавить в файлы с реагирующими компонентами. Вот как я делаю это с одним файлом (функции onChange и onSubmit): 

const onChangeFile = e => {
    setFileData(e.target.files[0]);
  };

const onSubmit = e => {
    e.preventDefault();

    const newItem = new FormData();
    newItem.append('item', fileData);

    const { description } = offerData;

    newItem.append('description', description);

    addItem(newItem);

    setFileData(null);
  }

Input (responsestrap): 

<CustomInput
     type="file"
     name="item" id="item" label="Choose item image..."
     onChange={onChangeFile}
/>

А вот как я это делаю с несколько файлов, но с одним вводом: 

const onChangeFile = e => {
    setFileData(e.target.files);
  };

const onSubmit = e => {
    e.preventDefault();
    const newItem = new FormData();
    for (const key of Object.keys(fileData)) {
      newItem.append('item', fileData[key])
    }

    const { description1, description2 } = item;

    newItem.append('description1', description1);
    newItem.append('description2', description2);

    addItem(newItem);
    setFileData(null);
  }

и вводом: 

<CustomInput
     type="file"
     name="item"
     id="item"
     multiple
     label="Add images/image..."
     onChange={onChangeFile}
/>

И оба работают, но на этот раз я хочу добавить несколько файлов (ровно два), с двумя отдельными input и мой хук useState не работает (как будто он не повторяется). Вот как это выглядит для обоих способов. 

const [fileData, setFileData] = useState(null);

Итак, как добавить один объект с двумя изображениями, но добавлен с двумя одиночными входами?

1 Ответ

0 голосов
/ 11 июля 2020

Не уверен, что полностью понимаю. Таким образом, теперь у вас есть один вход для приема данных, но вы хотите иметь возможность обновлять свое состояние с двух входов?

Когда вы устанавливаете состояние, вы делаете: 

const onChangeFile = e => {
    setFileData(e.target.files);
};

Если этот же обработчик подключен к другому входу, второй набор файлов просто переопределит первый.

Если вы хотите продолжать добавлять в свое состояние, вы можете либо использовать объект, либо массив. Таким образом, onChange может выглядеть примерно так: 

const onChangeFile = e => {
    // assuming here that e.target.files is an array already
    const filesToAdd = e.target.files;
    setFileData([...filesData, ...filesToAdd]);
};

Или с объектом 

const onChangeFile = e => {
    const filesToAdd = e.target.files.reduce(
                         (map, file) => ({..., [file.name]: file}), {}));
    const filesDataUpdate = {
         ...filesData,
         ...filesToAdd
    }
    setFileData(filesDataUpdate);
};

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

Надеюсь, что это поможет!

...