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