Реагировать JS короткие атрибуты - PullRequest
Новая
       3

Реагировать JS короткие атрибуты

0 голосов
/ 27 февраля 2020

Я работаю над 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;

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

Есть ли в любом случае, чтобы сократить все мои записи формы атрибутов от загрузки API, хранения или объявления и т. Д. c? Или у кого-то была большая идея написать это?

Ответы [ 2 ]

2 голосов
/ 27 февраля 2020

Мой подход будет хранить все атрибуты в отдельном файле. Например, data. 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})

Это будет хорошо работать и выглядит организованно.

Спасибо.

0 голосов
/ 27 февраля 2020 
AddCompany = () => {
axios.post('http://localhost:57025/api//companyedit/', {
   ...this.state
},
...
...

Это должно решить, если тело запроса Api имеет одинаковые имена ключей. В противном случае вы можете создать сопоставитель для полей формы и полей тела запроса Api. Например: 

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

И запустить al oop, чтобы получить правильное тело запроса.

...