React JS 缩短属性

Question

我正在研究 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 获取、存储或声明等中缩短我所有的属性写入形式？或者任何人有更好的想法来写这个？

Answer 1

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

如果 Api 的请求正文具有相同的键名，这应该可以解决它。 否则，您可以为表单字段创建映射器到 Api 请求正文的字段。喜欢：

const myMapper = {
      'CompanyName': 'ApiCompanyName',
      ...
      ...
}

并运行一个循环来获取正确的请求体。

Answer 2

我的方法是将所有属性存储在单独的文件中。 例如。数据.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})

这会很好用，看起来很有条理。

谢谢。