Regex 是否有任何方法可以为多个字段创建相同的名称,如name=";fieldName[]”;以redux的形式?

Regex 是否有任何方法可以为多个字段创建相同的名称,如name=";fieldName[]”;以redux的形式?,regex,excel,reactjs,filereader,redux-form,Regex,Excel,Reactjs,Filereader,Redux Form,我正在处理一个场景,我正在选择一个excel文件并通过我的自定义正则表达式和验证规则对其进行验证。在验证之后,我需要在表中获得该文件的预览,所有这些场景我都做得很好。但问题是,在excel文件regex失败的列或行的特定索引上,应该有一个文本框或组合框。这将是有条件的每一列,如如果电子邮件是无效的,应该有一个电子邮件输入框soo,用户可以纠正它,在用户的另一边添加一些无效的城市,不在数据库中,应该有城市组合框soo,他可以选择一个有效的 下面是我用来读取和验证文件的代码 import React

我正在处理一个场景,我正在选择一个excel文件并通过我的自定义正则表达式和验证规则对其进行验证。在验证之后,我需要在表中获得该文件的预览,所有这些场景我都做得很好。但问题是,在excel文件regex失败的列或行的特定索引上,应该有一个文本框或组合框。这将是有条件的每一列,如如果电子邮件是无效的,应该有一个电子邮件输入框soo,用户可以纠正它,在用户的另一边添加一些无效的城市,不在数据库中,应该有城市组合框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);
import React,{Component}来自“React”;
从“react redux”导入{connect};
从“redux表单”导入{Field,reduxForm};
从“./UI/select”导入RenderSelectInput;
从“./UI/input”导入InputComponent;
从“./UI/imageUploader”导入ImageUploaderComp;
进口{
getcities,
格特穆尼特,
getstypes
}来自“../../redux/actions/comboAction”;
从“XLSX”导入XLSX;
//反应带组件
进口{
卡片
万向节,
卡片页脚,
徽章,
按钮
名片夹,
FormGroup,
形式,
输入,
集装箱,
名片,
卡片文本,
一行
上校,
警觉的,
不受控制的人,
下拉菜单,
下拉项,
不受控制的下降,
下拉开关,
媒体
标页码
分页主义,
分页链接,
进步,
桌子
不可控刀尖
}从“反应带”;
//核心部件
从“components/Headers/Header.js”导入标题;
从“redux”导入{$CombinedState};
类ExcelBook扩展组件{
建造师(道具){
超级(道具);
}
状态={
ErrorMsg:null,
successsg:null,
IsExcelled:错误,
IsExcelling:错误,
excelFileData:[]
};
componentDidMount(){
if(this.props.reduxStore.cities.fetchedCities.docs.length{
const cities=this.props.reduxStore.cities.fetchedCities.docs;
const shipmentTypes=this.props.reduxStore.stypes.fetchedStypes.docs;
const munits=this.props.reduxStore.munit.fetchedmunits.docs;
var reader=new FileReader();
设excelData=[];
reader.readAsArrayBuffer(e.target.files[0]);
reader.onload=函数(e){
var数据=e.target.result;
var数据=新的Uint8Array(reader.result);
var wb=XLSX.read(数据,{type:“array”});
var first_sheet=wb.Sheets[wb.SheetNames[0];
var data=XLSX.utils.sheet_到_json(第一个_工作表{
标题:1
});
让我;
让j;
让k;
让我;
与城市相比,常数=[];
const comparedWithShipmentTypes=[];
常量compareWithUnits=[];
对于(j=0;j