Есть ли способ создать одно и то же имя нескольких полей, таких как name = "fieldName []" в избыточной форме? - PullRequest
Новая
       62

Есть ли способ создать одно и то же имя нескольких полей, таких как name = "fieldName []" в избыточной форме?

0 голосов
/ 22 марта 2020

Я работаю над сценарием. Я выбираю файл Excel и проверяю его, используя мои собственные правила регулярных выражений и проверки. после проверки мне нужно получить предварительный просмотр этого файла в таблице, я делаю все эти сценарии ios очень хорошо. но здесь проблема в том, что в указанном c индексе столбца или строки, где не выполняется регулярное выражение файла Excel, должно быть либо текстовое поле, либо Combobox. это будет условно для каждого столбца, например, если адрес электронной почты недействителен, должно быть поле ввода электронной почты, так что пользователь может исправить его, с другой стороны пользователь добавляет некоторый неверный город, которого нет в БД, должен быть Combobox of city soo, что он может выбрать правильный.

Вот код, который я использую для чтения и проверки файла 

import React, { Component } from "react";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import RenderSelectInput from "../UI/select";
import InputComponent from "../UI/input";
import ImageUploaderComp from "../UI/imageUploader";

import {
  getcities,
  getmunit,
  getstypes
} from "../../redux/actions/comboAction";
import XLSX from "xlsx";
// reactstrap components
import {
  Card,
  CardHeader,
  CardFooter,
  Badge,
  Button,
  CardBody,
  FormGroup,
  Form,
  Input,
  Container,
  CardTitle,
  CardText,
  Row,
  Col,
  Alert,
  UncontrolledAlert,
  DropdownMenu,
  DropdownItem,
  UncontrolledDropdown,
  DropdownToggle,
  Media,
  Pagination,
  PaginationItem,
  PaginationLink,
  Progress,
  Table,
  UncontrolledTooltip
} from "reactstrap";
// core components
import Header from "components/Headers/Header.js";
import { $CombinedState } from "redux";
class ExcelBook extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    ErrorMsg: null,
    SuccessMsg: null,
    isExcelLoaded: false,
    isExcelLoading: false,
    excelFileData: []
  };
  componentDidMount() {
    if (this.props.reduxStore.cities.fetchedCities.docs.length <= 0) {
      this.props.getAllCities();
    }
    if (this.props.reduxStore.munit.fetchedMunit.docs.length <= 0) {
      this.props.getAllmunits();
    }

    if (this.props.reduxStore.stypes.fetchedStypes.docs.length <= 0) {
      this.props.getAllstypes();
    }
  }
  fileProcess = async e => {
    try {
      let contentBuffer = await this.onchangeHanglerExcelFile(e);
      console.log(contentBuffer);
      this.setState({
        excelFileData: contentBuffer,
        isExcelLoading: false,
        isExcelLoaded: true
      });
    } catch (err) {
      console.log(err);
    }
  };
  onchangeHanglerExcelFile = e => {
    this.setState({
      isExcelLoading: true
    });
    return new Promise((resolve, reject) => {
      const cities = this.props.reduxStore.cities.fetchedCities.docs;

      const shipmentTypes = this.props.reduxStore.stypes.fetchedStypes.docs;
      const munits = this.props.reduxStore.munit.fetchedMunit.docs;

      var reader = new FileReader();
      let excelData = [];
      reader.readAsArrayBuffer(e.target.files[0]);

      reader.onload = function(e) {
        var data = e.target.result;
        var data = new Uint8Array(reader.result);
        var wb = XLSX.read(data, { type: "array" });

        var first_worksheet = wb.Sheets[wb.SheetNames[0]];
        var data = XLSX.utils.sheet_to_json(first_worksheet, {
          header: 1
        });

        let i;
        let j;
        let k;
        let l;

        const comparedWithCities = [];
        const comparedWithShipmentTypes = [];
        const compareWithMunits = [];
        for (j = 0; j < cities.length; j++) {
          comparedWithCities.push(cities[j].cityName);
        }
        for (k = 0; k < shipmentTypes.length; k++) {
          comparedWithShipmentTypes.push(shipmentTypes[k].shipmentType);
        }
        for (l = 0; l < munits.length; l++) {
          compareWithMunits.push(munits[l].unit);
        }

        for (i = 1; i < data.length; i++) {
          const excelRowObject = {};

          excelRowObject["cName"] = data[i][0];

          if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(data[i][1])) {
            excelRowObject["cEmail"] = false;
          } else {
            excelRowObject["cEmail"] = data[i][1];
          }
          if (!/^3[0-9+]{9}$/i.test(data[i][2])) {
            excelRowObject["cPhone"] = false;
          } else {
            excelRowObject["cPhone"] = data[i][2];
          }

          if (!/^[a-zA-Z0-9 _/#&+-||]{25,}$/i.test(data[i][3])) {
            excelRowObject["cAddress"] = false;
          } else {
            excelRowObject["cAddress"] = data[i][3];
          }
          const ccity = data[i][4].replace(/\s/g, "").toLowerCase();
          const capitalCity = ccity.charAt(0).toUpperCase() + ccity.slice(1);

          if (comparedWithCities.includes(capitalCity) === false) {
            excelRowObject["cCity"] = false;
          } else {
            const ccity = data[i][4].replace(/\s/g, "").toLowerCase();
            const capitalCity = ccity.charAt(0).toUpperCase() + ccity.slice(1);
            excelRowObject["cCity"] = capitalCity;
          }

          if (!/^[0-9]*$/.test(data[i][5])) {
            excelRowObject["cAmount"] = false;
          } else {
            excelRowObject["cAmount"] = data[i][5];
          }
          excelRowObject["productDescription"] = data[i][6];
          excelRowObject["cWeight"] = data[i][7];

          const cstype = data[i][8].replace(/\s/g, "").toLowerCase();
          const capitalStype = cstype.charAt(0).toUpperCase() + cstype.slice(1);
          if (comparedWithShipmentTypes.includes(capitalStype) === false) {
            excelRowObject["cStypes"] = false;
          } else {
            const cstype = data[i][8].replace(/\s/g, "").toLowerCase();
            const capitalStype =
              cstype.charAt(0).toUpperCase() + cstype.slice(1);
            excelRowObject["cStypes"] = capitalStype;
          }
          if (!/^[0-9]*$/.test(data[i][9])) {
            excelRowObject["cPieces"] = false;
          } else {
            excelRowObject["cPieces"] = data[i][9];
          }
          if (
            data[i][10] === "Y" ||
            data[i][10] === "N" ||
            data[i][10] === "y" ||
            data[i][10] === "n"
          ) {
            excelRowObject["cFragile"] = data[i][10];
          } else {
            excelRowObject["cFragile"] = false;
          }
          const dimentionArr = data[i][11].split(",");

          const munit = dimentionArr[0].replace(/\s/g, "").toLowerCase();
          const capitalMunit = munit.charAt(0).toUpperCase() + munit.slice(1);

          if (compareWithMunits.includes(capitalMunit) === false) {
            excelRowObject["cMunit"] = false;
          } else {
            const munit = dimentionArr[0].replace(/\s/g, "").toLowerCase();
            const capitalMunit = munit.charAt(0).toUpperCase() + munit.slice(1);
            excelRowObject["cMunit"] = capitalMunit;
          }
          if (!/^[0-9]*$/.test(dimentionArr[1])) {
            excelRowObject["cHeight"] = false;
          } else {
            excelRowObject["cHeight"] = dimentionArr[1];
          }
          if (!/^[0-9]*$/.test(dimentionArr[2])) {
            excelRowObject["cWidth"] = false;
          } else {
            excelRowObject["cWidth"] = dimentionArr[2];
          }
          if (!/^[0-9]*$/.test(dimentionArr[3])) {
            excelRowObject["cLength"] = false;
          } else {
            excelRowObject["cLength"] = dimentionArr[3];
          }

          excelData.push(excelRowObject);
        }
        resolve(excelData);
      };
      reader.onerror = reject;
    });
  };
  handleSubmit(data) {
    console.log(data);
  }
  renderName = ({ fields, meta: { submitFailed, error } }) => (
    <div>
      {fields.map((name, index) => (
        <div key={index}>
          <Field
            component={InputComponent}
            className="form-control-alternative"
            name={`${name}.consigneName`}
            type="text"
            id="input-consigneeName"
            placeholder="Consginee Name"
          />
        </div>
      ))}
    </div>
  );
  render() {
    const { handleSubmit, isSendingRequest } = this.props;

    return (
      <>
        <Header
          pageType="innerPage"
          headerClass="header bg-gradient-success pb-8 pt-5 pt-md-8"
        />
        {/* Page content */}
        <Container className="mt--7" fluid>
          {/* Table */}
          <Row>
            <div className="col">
              <Card className="shadow">
                <CardHeader className="border-0">
                  <h3 className="mb-0">Excel Booking</h3>
                </CardHeader>
                <CardBody align="center">
                  <CardTitle>
                    Book your packet according to the sample provided below,
                    supported file types are <br />
                    <b style={{ color: "green" }}>(CSV , XLSX , XLS)</b>
                  </CardTitle>

                  <Button
                    className="btn-icon btn-3"
                    color="primary"
                    type="button"
                    onClick={this.onclickHandler}
                  >
                    <span className="btn-inner--icon">
                      <i className="fa fa-download" />
                    </span>
                    <span className="btn-inner--text">Sample File</span>
                  </Button>

                  <Button
                    className="btn-icon btn-3"
                    color="success"
                    type="button"
                  >
                    <span className="btn-inner--icon">
                      <i className="fa fa-upload" />
                    </span>
                    <span className="btn-inner--text">Upload Excel</span>
                  </Button>
                  <input
                    type="file"
                    onChange={value => this.fileProcess(value)}
                  ></input>
                  <div id="wrapper"></div>
                </CardBody>
              </Card>
            </div>
          </Row>

          <Row>
            <div className="col">
              <Card className="shadow">
                <CardHeader className="border-0">
                  <h3 className="mb-0">PREVIEW</h3>
                </CardHeader>
                <Form
                  encType="multipart/form-data"
                  onSubmit={handleSubmit(this.handleSubmit.bind(this))}
                >
                  <Table className="align-items-center table-flush" responsive>
                    <thead className="thead-light">
                      <tr>
                        <th scope="col">Consignee Name</th>
                        <th scope="col">Consignee Email</th>
                        <th scope="col">Consginee Phone</th>
                        <th scope="col">Consginee Address</th>
                        <th scope="col">Designation City</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Product Desciption</th>
                        <th scope="col">Weight</th>
                        <th scope="col">Shipment Type</th>
                        <th scope="col">Pieces</th>
                        <th scope="col">Fragile</th>
                        <th scope="col">Unit</th>
                        <th scope="col">Height</th>
                        <th scope="col">Width</th>
                        <th scope="col">Length</th>

                        <th scope="col" />
                      </tr>
                    </thead>
                    <tbody>
                      {this.state.isExcelLoaded &&
                      this.state.isExcelLoading === false ? (
                        this.state.excelFileData.map((p, index) => {
                          return (
                            <tr key={index}>
                              <td>{p.cName}</td>
                              <td>{p.cEmail}</td>
                              <td>{p.cPhone}</td>
                              <td>{p.cAddress}</td>
                              <td>{p.cCity}</td>
                              <td>{p.cAmount}</td>
                              <td>{p.productDescription}</td>
                              <td>{p.cWeight}</td>
                              <td>{p.cStypes}</td>
                              <td>{p.cPieces}</td>
                              <td>{p.cFragile}</td>
                              <td>{p.cMunit}</td>
                              <td>{p.cHeight}</td>
                              <td>{p.cWidth}</td>
                              <td>{p.cLength}</td>
                            </tr>
                          );
                        })
                      ) : (
                        <tr>
                          <td>Select File</td>
                        </tr>
                      )}
                    </tbody>
                  </Table>
                  <Button type="submit"></Button>
                </Form>
                <CardFooter className="py-4"></CardFooter>
              </Card>
            </div>
          </Row>
        </Container>
      </>
    );
  }
}
const mapStateToProps = state => {
  return {
    reduxStore: state
  };
};
const mapDispatchToProps = dispatch => {
  return {
    getAllCities: () => {
      dispatch(getcities());
    },
    getAllmunits: () => {
      dispatch(getmunit());
    },
    getAllstypes: () => {
      dispatch(getstypes());
    }
  };
};
ExcelBook = reduxForm({
  form: "excelBooking",

})(ExcelBook);
export default connect(mapStateToProps, mapDispatchToProps)(ExcelBook);

это файл Excel, который я пытаюсь загрузить:

excel file screenshot i am using

это предварительный просмотр, который я получил после проверки и обработки файла Excel в файле примечания на стороне клиента, где вы видите, что пустые пробелы не прошли проверку

result after upload

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

response preview

Я старался изо всех сил, чтобы продемонстрировать свою проблему. в соответствии с моим зрительным откликом, который уже сформирован, основной упор делается на условную визуализацию полей с использованием избыточной формы, которую я также использую, и оборачиваюсь вокруг полярного массива, но я не могу взломать эту ситуацию.

...