React js массив файлов

Question

Всем привет,

Данный код загружает имя только одного файла, можно, пожалуйста, объяснить на примере, как загружать массив файлов. Т.е Нажал первый раз - загрузил имя первого файла, нажал второй раз - рядом с именем первого файла появилось имя второго файла и т.д.

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    const arr = [this.state = {
      fileName: '',
    }];
    // this.state = {
    //   fileName: '',
    // };
  }
    render() {
      return <>
        <div>
          {/* {arr.map(o => */}
            <span>{this.state.fileName}</span>
          {/* )} */}
          <input type="file" onChange={(e) => {
            e.preventDefault();
            this.setState({ fileName: e.target.files[0].name });
          }} />
        </div>
      </>;
    }
  }

export default MyComponent;

Answer 1

Ваш текущий код правильно захватывает имя одного выбранного файла, поскольку e.target.files[0] обращается только к первому файлу в объекте FileList, и вы каждый раз заменяете состояние fileName этим одним именем.

Вероятно решением будет что-то вроде:

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      fileNames: [],
    };
  }

  handleFileChange = (e) => {
    e.preventDefault();
    const files = e.target.files;
    if (files.length > 0) {
      const newFileName = files[0].name;

      this.setState(prevState => ({
        fileNames: [...prevState.fileNames, newFileName]
      }));
    }
  }

  render() {
    return (
      <div>
        <div>
          {this.state.fileNames.map((fileName, index) => (
            <span key={index} style={{ marginRight: '10px' }}>
              {fileName}
            </span>
          ))}
        </div>
        <input
          type="file"
          onChange={this.handleFileChange}
        />
      </div>
    );
  }
}

export default MyComponent;

БЛОГ НА HUSL

React js массив файлов

Ответы (1 шт):