Читать CSV файл за столбцом за столбцом в реакции js?

Question

Я пытаюсь прочитать CSV-файл в реакции. js путем выбора указанных c столбцов по форме, как вы видите на изображении, есть 6 раз выбора ввода, где выбираются любые указанные c столбцы от А до Я, но Когда я пытаюсь загрузить CSV-файл, он напрямую загружается без отправки, но я хочу сначала загрузить CSV-файл и загрузить выбранные столбцы от A до Z с помощью параметра select, я попытался найти некоторые решения для inte rnet, но не смог найти любые полезные вещи, поэтому я спросил здесь

import React, { Component } from "react";
// import { CsvToHtmlTable } from "react-csv-to-table";
import ReactFileReader from "react-file-reader";
// import ls from "local-storage";

class Import extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });


    console.log(this.state);
  }

onDrop(files) {
this.setState({ files });

var file = files[0];

const reader = new FileReader();
reader.onload = () => {
  csv.parse(reader.result, (err, data) => {
    var userList = [];

    for (var i = 0; i < data.length; i++) {
      const name = data[i][0];
      const phoneNumber = data[i][1];
      const address = data[i][2];
      const classType = data[i][4];
      const vin = data[i][5];
      const price_net = data[i][6];
      const price_brutoo = data[i][7];
      const newUser = {
        name: name,
        phoneNumber: phoneNumber,
        address: address,
        class: classType,
        vin: vin,
        price_net: price_net,
        price_brutoo: price_brutoo
      };
      userList.push(newUser);

      fetch("http://localhost:8000/api/1/csv/", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(newUser)
      });
    }
  });
};



  render() {
    const options = [];
    for (var i = 65; i <= 90; i++) {
      const don = String.fromCharCode(i);

      options.push(
        <option value={don} key={don}>
          {don}
        </option>
      );
    }

    // console.log(options);
    return (
      <div>
        <div id="invoice" className="modal">
          <a
            href="# "
            rel="modal:close"
            className="float-right text-white h4"
            style={{
              background: "black",
              borderRadius: "50%",
              padding: "10px",
              height: "32px",
              lineHeight: "10px",
              position: "relative",
              left: "30px",
              top: "-18px"
            }}
          >
            &times;
          </a>
          <p className="mod" style={{ marginTop: "40px" }}>
            IMPORT INVOICE
          </p>
          <hr></hr>
          <form
            noValidate
            autoComplete="off"
            onSubmit={this.handleSubmit}
            style={{ display: "flex", flexWrap: "wrap" }}
          >
            <div classNam="import_invoice">
              <div className="form-group" style={{ marginTop: "15px" }}>
                <label
                  for="exampleInputEmail1"
                  className="font-weight-bold h6"
                  style={{ fontSize: "17px" }}
                >
                  FILE TYPE
                </label>
                <select
                  name="invoice_type"
                  value={this.state.invoice_type}
                  onChange={this.onChange}
                  class="form-control donn"
                  style={{ width: "300px", marginTop: "10px" }}
                >
                  <option value="1">Choose Type of Invoice</option>
                  <option value="1">General Score</option>
                  <option value="2">Dynamic</option>
                  <option value="3">Speed</option>
                  <option value="4">Fuel Save</option>
                </select>
              </div>
              <div className="form-group" style={{ marginTop: "35px" }}>
                <p className="font-weight-bold " style={{ fontSize: "17px" }}>
                  IMPORT INVOICE
                </p>
                <p id="pp">
                  Import Csv File. File size should not exceed not more than
                  5MB.
                </p>

                <ReactFileReader
                  multipleFiles={false}
                  fileTypes={[".csv"]}
                  handleFiles={this.onDrop.bind(this)}
                >
                  <button className="btn" id="bttn">
                    IMPORT INVOICE{" "}
                    <span className="float-right">
                      <i class="fa fa-paperclip"></i>
                    </span>
                  </button>
                </ReactFileReader>
              </div>

              <p
                className="font-weight-bold "
                style={{ fontSize: "17px", marginTop: "25px" }}
              >
                SELECT COLUMNS
              </p>
              <div className="row" style={{ marginTop: "25px" }}>
                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    DATE
                  </label>
                  <select
                    name="date"
                    value={this.state.date}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Select Date</option>
                    {options}
                  </select>
                </div>

                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    PLATE NUMBER
                  </label>
                  <select
                    name="plate_number"
                    value={this.state.plate_number}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Select Plate Number</option>
                    {options}
                  </select>
                </div>

                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    VIN
                  </label>
                  <select
                    name="vin"
                    value={this.state.vin}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Select Vin</option>
                    {options}
                  </select>
                </div>

                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    INVOICE NUMBER
                  </label>
                  <select
                    name="invoice_number"
                    value={this.state.invoice_number}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Select Invoice </option>
                    {options}
                  </select>
                </div>
              </div>

              <div className="row" style={{ marginTop: "25px" }}>
                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    DESCRIPTION
                  </label>
                  <select
                    name="description"
                    value={this.state.description}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Select Description</option>
                    {options}
                  </select>
                </div>

                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    PRICE NETTO
                  </label>
                  <select
                    name="price_net"
                    value={this.state.price_net}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Price Net</option>
                    {options}
                  </select>
                </div>

                <div className="col-sm-3">
                  <label
                    for="exampleInputEmail1"
                    className="font-weight-bold h6"
                    style={{ fontSize: "13px" }}
                  >
                    PRICE BRUTTO
                  </label>
                  <select
                    name="price_brutt"
                    value={this.state.price_brutt}
                    onChange={this.onChange}
                    class="form-control donn"
                    style={{ marginTop: "10px" }}
                  >
                    <option value="1">Price Brutto</option>
                    {options}
                  </select>
                </div>
              </div>

              <div style={{ marginTop: "20px", marginBottom: "20px" }}>
                <center>
                  <button
                    type="submit"
                    value="Add Invoice"
                    style={{ background: "#b71c1c", color: "white" }}
                    className="btn btn-danger br"
                  >
                    IMPORT
                  </button>
                </center>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Import;