代码之家  ›  专栏  ›  技术社区  ›  Funny Side

在react js中逐列读取Csv文件?

  •  0
  • Funny Side  · 技术社区  · 5 年前

    enter image description here

    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;
    
    0 回复  |  直到 5 年前
    推荐文章