С помощью загрузить файл. Как бы я установить его для последующего представления в список?

Question

Я использую:

  <ReactFileReader handleFiles={this._getFiles}>
     <button className='btn'>Upload</button>
   </ReactFileReader>

В веб-части spfx. Это форма, которая отправляется в список SPO, но я хочу, чтобы файл был прикреплен к элементу списка. Я пробовал много других решений, но у меня недостаточно знаний о том, как их реализовать. Поиск оболочки сделал вещи потенциально более простыми, но я все еще не знаю, как установить загрузку в состояние. Какого типа должен быть инициализирован элемент состояния? [], "", или null

Что еще я должен знать? Вот моя функция для загрузки файла:

private _getFiles = files => {
  const content = files.result;
  console.log('file content:', content);

  this.setState({
    FileUpload: files
  }, () => {
    console.log(this.state.FileUpload);
  });
  console.log(files);

}

В консоли я получаю [object FileLest]: 0: File, length: 1}, но он считывает заголовок документа, который я ' мы "прикреплены". Я читал это, но мне нужно, чтобы он был переписан в базовый пример кода c: Как установить файловый объект в состояние с помощью перехватчиков React?

Хотя он ничего не устанавливает в состояние.

Полагаю, это начало?

Answer 1

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

constructor(props) {
    super(props);
    this.state = {
      fileInput : React.createRef();
    }
}

Затем используйте его как:

  <ReactFileReader handleFiles={this._getFiles} ref={this.state.fileInput}>
     <button className='btn'>Upload</button>
   </ReactFileReader>

Наконец, в вашем методе _getFiles:

console.log('Selected file - ', this.state.fileInput[0].name);

Надеюсь, это работает для вас.