gpt4 book ai didi

javascript - React JS 缩短属性

转载 作者:行者123 更新时间:2023-12-01 00:05:16 27 4
gpt4 key购买 nike

我正在研究React Js,我遇到了一个问题,那就是我需要存储大量的值/属性。我的代码如下:

import React from 'react';
import axios from 'axios';
import '../Container/Company.css'
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';
class AddCompany extends React.Component {
constructor(props) {
super(props)
this.state = {
CompanyName: '',
CompanyReg: '',
CompanyAddr1: '',
CompanyAddr2: '',
CompanyAddr3: '',
City: '',
State: '',
PostCode: '',
Phone: '',
Fax: '',
ContactPerson: '',
Email: '',
DealerName: '',
Phone2: '',
Country: '',
Remark: '',
DealerCode: '',
SerialNo: '',
IsActive: '',
}
}
AddCompany = () => {
axios.post('http://localhost:57025/api//companyedit/', {
CompanyName: this.state.CompanyName,
CompanyReg: this.state.CompanyReg,
CompanyAddr1: this.state.CompanyAddr1,
CompanyAddr2: this.state.CompanyAddr2,
CompanyAddr3: this.state.CompanyAddr3,
City: this.state.City,
PostCode: this.state.PostCode,
Phone: this.state.Phone,
Fax: this.state.Fax,
ContactPerson: this.state.ContactPerson,
Email: this.state.Email,
DealerName: this.state.DealerName,
Phone2: this.state.Phone2,
Country: this.state.Country,
Remark: this.state.Remark,
DealerCode: this.state.DealerCode,
SerialNo: this.state.SerialNo,
IsActive: this.state.IsActive})
.then(json => {
if (json.data.Status === 'Success') {
console.log(json.data.Status);
alert("Data Save Successfully");
this.props.history.push('/CompanyList')
}
else {
alert('Data not Saved');
debugger;
this.props.history.push('/CompanyList')
}
})
}

handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}

render() {
return (
<Container className="App">
<h4 className="PageHeading">Enter Company Informations</h4>
<Form className="form">
<Col>
<FormGroup row>
<Label for="CompanyName" sm={2}>CompanyName</Label>
<Col sm={10}>
<Input type="text" CompanyName="CompanyName" onChange={this.handleChange} value={this.state.CompanyName} placeholder="Enter Name" />
</Col>
</FormGroup>
<FormGroup>
<Label for="CompanyReg" sm={2}>CompanyReg</Label>
<Col sm={10}>
<Input type="text" CompanyReg="CompanyReg" onChange={this.handleChange.CompanyReg} value={this.state.CompanyReg} placeholder="Enter Reg" />
</Col>
</FormGroup>
<FormGroup>
<Label for="CompanyAddr1" sm={2}>CompanyAddr1</Label>
<Col sm={10}>
<Input type="text" CompanyAddr1="CompanyAddr1" onChange={this.handleChange.CompanyAddr1} value={this.state.CompanyAddr1} placeholder="Enter Address Line 1" />
</Col>
</FormGroup>
<FormGroup>
<Label for="CompanyAddr2" sm={2}>CompanyAddr2</Label>
<Col sm={10}>
<Input type="text" CompanyReg="CompanyAddr2" onChange={this.handleChange.CompanyAddr2} value={this.state.CompanyAddr2} placeholder="Enter Address Line 2" />
</Col>
</FormGroup>
<FormGroup>
<Label for="CompanyAddr3" sm={2}>CompanyAddr3</Label>
<Col sm={10}>
<Input type="text" CompanyAddr3="CompanyAddr3" onChange={this.handleChange.CompanyAddr3} value={this.state.CompanyAddr3} placeholder="Enter Address Line 3" />
</Col>
</FormGroup>
<FormGroup>
<Label for="City" sm={2}>City</Label>
<Col sm={10}>
<Input type="text" City="City" onChange={this.handleChange.City} value={this.state.City} placeholder="Enter City" />
</Col>
</FormGroup>
<FormGroup>
<Label for="State" sm={2}>State</Label>
<Col sm={10}>
<Input type="text" State="State" onChange={this.handleChange.State} value={this.state.State} placeholder="Enter State" />
</Col>
</FormGroup>
<FormGroup>
<Label for="PostCode" sm={2}>PostCode</Label>
<Col sm={10}>
<Input type="text" PostCode="PostCode" onChange={this.handleChange.PostCode} value={this.state.PostCode} placeholder="Enter PostCode" />
</Col>
</FormGroup>
<FormGroup>
<Label for="Phone" sm={2}>Phone</Label>
<Col sm={10}>
<Input type="text" Phone="Phone" onChange={this.handleChange.Phone} value={this.state.Phone} placeholder="Enter Phone" />
</Col>
</FormGroup>
<FormGroup>
<Label for="Fax" sm={2}>Fax</Label>
<Col sm={10}>
<Input type="text" Fax="Fax" onChange={this.handleChange.Fax} value={this.state.Fax} placeholder="Enter Fax" />
</Col>
</FormGroup>
<FormGroup>
<Label for="ContactPerson" sm={2}>ContactPerson</Label>
<Col sm={10}>
<Input type="text" ContactPerson="ContactPerson" onChange={this.handleChange.ContactPerson} value={this.state.ContactPerson} placeholder="Enter ContactPerson" />
</Col>
</FormGroup>
<FormGroup>
<Label for="Email" sm={2}>Email</Label>
<Col sm={10}>
<Input type="text" Email="Email" onChange={this.handleChange.Email} value={this.state.Email} placeholder="Enter Email" />
</Col>
</FormGroup>
<FormGroup>
<Label for="DealerName" sm={2}>DealerName</Label>
<Col sm={10}>
<Input type="text" DealerName="DealerName" onChange={this.handleChange.DealerName} value={this.state.DealerName} placeholder="Enter DealerName" />
</Col>
</FormGroup>
<FormGroup>
<Label for="Phone2" sm={2}>Phone2</Label>
<Col sm={10}>
<Input type="text" Phone2="Phone2" onChange={this.handleChange.Phone2} value={this.state.Phone2} placeholder="Enter Second Phone Number" />
</Col>
</FormGroup>
<FormGroup>
<Label for="Country" sm={2}>Country</Label>
<Col sm={10}>
<Input type="text" Country="Country" onChange={this.handleChange.Country} value={this.state.Cpuntry} placeholder="Enter Country" />
</Col>
</FormGroup>
<FormGroup>
<Label for="Remark" sm={2}>Remark</Label>
<Col sm={10}>
<Input type="text" Remark="Remark" onChange={this.handleChange.Remark} value={this.state.Remark} placeholder="Enter Remark" />
</Col>
</FormGroup>
<FormGroup>
<Label for="DealerCode" sm={2}>DealerCode</Label>
<Col sm={10}>
<Input type="text" PostCode="DealerCode" onChange={this.handleChange.DealerCode} value={this.state.DealerCode} placeholder="Enter DealerCode" />
</Col>
</FormGroup>
<FormGroup>
<Label for="SerialNo" sm={2}>SerialNo</Label>
<Col sm={10}>
<Input type="text" SerialNo="SerialNo" onChange={this.handleChange.SerialNo} value={this.state.SerialNo} placeholder="Enter SerialNo" />
</Col>
</FormGroup>
<FormGroup>
<Label for="IsActive" sm={2}>IsActive</Label>
<Col sm={10}>
<Input type="text" IsActive="IsActive" onChange={this.handleChange.IsActive} value={this.state.IsActive} placeholder="Enter Y or N" />
</Col>
</FormGroup>
</Col>
<Col>
<FormGroup row>
<Col sm={5}>
</Col>
<Col sm={1}>
<button type="button" onClick={this.Addstudent} className="btn btn-success">Submit</button>
</Col>
<Col sm={1}>
<Button color="danger">Cancel</Button>{' '}
</Col>
<Col sm={5}>
</Col>
</FormGroup>
</Col>
</Form>
</Container>
);
}

}

export default AddCompany;

我试图通过存储用户键入的信息并将该信息传递到我的后端 API 来AddCompany。看来这是一种笨拙的方法。

是否有办法缩短 api 获取、存储或声明等的所有属性写入形式?或者有人对写这篇文章有更好的想法吗?

最佳答案

我的方法是将所有属性存储在单独的文件中。例如。数据.js

export const attributes = {
CompanyName: '',
CompanyReg: '',
CompanyAddr1: '',
CompanyAddr2: '',
CompanyAddr3: '',
City: '',
State: '',
PostCode: '',
Phone: '',
Fax: '',
ContactPerson: '',
Email: '',
DealerName: '',
Phone2: '',
Country: '',
Remark: '',
DealerCode: '',
SerialNo: '',
IsActive: '',
}

并在当前页面中导入该对象,例如

import { attributes } from './your_location';

初始化状态如下:

constructor(){
super();
this.state = {...attributes}
}

在发布请求时像这样发送

axios.post('http://localhost:57025/api//companyedit/', {...this.state})

这会很好地工作并且看起来很有组织。

谢谢。

关于javascript - React JS 缩短属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60429884/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com