Блог

Я могу использовать react-papaparse для анализа локального файла, запускающего onFileLoad={this.handleOnFileLoad} ok, но я хотел бы его транслировать, поэтому я попробовал приведенный ниже код, пытаясь передать onStep или step в props, но он не срабатывает. Документация подразумевает, что это возможно, но я делаю это неправильно? Я хочу обрабатывать каждую строку за раз, если это действительно большой файл. Спасибо.

 import React from 'react';
import { CSVReader } from 'react-papaparse';

const buttonRef = React.createRef();

export default class CSVReader1 extends React.Component {
  handleOpenDialog = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.open(e);
    }
  };
  handleOnStep = (row) => {
    console.log('handleOnComplete---------------------------');
    console.log(row);
    console.log('---------------------------');
  };
  handleOnError = (err, file, inputElem, reason) => {
    console.log('handleOnError---------------------------');
    console.log(err);
    console.log('---------------------------');
  };
  handleOnRemoveFile = (data) => {
    console.log('handleOnRemoveFile---------------------------');
    console.log(data);
    console.log('---------------------------');
  };
  handleRemoveFile = (e) => {
    // Note that the ref is set async, so it might be null at some point
    if (buttonRef.current) {
      buttonRef.current.removeFile(e);
    }
  };
  render() {
    return (
      <CSVReader
        ref={buttonRef}
        onError={this.handleOnError}
        onStep={this.handleOnStep}
        noClick
        noDrag
        onRemoveFile={this.handleOnRemoveFile}
      >
        {({ file }) => (
          <div className="form">
            <div>
              <button className="button" type="button" onClick={this.handleOpenDialog} >Browse file</button>
            </div>
            <div className="text-input">
              {file amp;amp; file.name}
            </div>
            <div>
              <button className="button button--secondary" onClick={this.handleRemoveFile}>Remove</button>
            </div>
          </div>

        )}
      </CSVReader>

    );
  };
}
 

Если у вас step complete определен обработчик или, то onFileLoad он не вызывается.

Исходная строка

 config?.complete || config?.step
          ? config.complete
          : () => {
              if (!onDrop amp;amp; onFileLoad) {
                onFileLoad(data, file);
              } else if (onDrop amp;amp; !onFileLoad) {
                onDrop(data, file);
              }
            }