Advertisement
nubilfi

Controlled Component - set value attr state within a method

Jan 7th, 2018
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import axios from 'axios';
  3. import _ from 'lodash';
  4.  
  5. const ROOT_URL = 'http://localhost:3001/api/v1';
  6.  
  7. const FIELDS = {
  8.     fullname: {
  9.         type: 'input',
  10.         name: 'fullname',
  11.         label: 'Name'
  12.     },
  13.     position: {
  14.         type: 'input',
  15.         name: 'position',
  16.         label: 'Position'
  17.     },
  18.     address: {
  19.         type: 'textarea',
  20.         name: 'address',
  21.         label: 'Address'
  22.     },
  23.     phone: {
  24.         type: 'input',
  25.         name: 'phone',
  26.         label: 'Phone'
  27.     }
  28. }
  29.  
  30. class CreateStaff extends Component {
  31.     constructor(props) {
  32.         super(props);
  33.  
  34.         this.state = {
  35.             fields: {
  36.                 fullname: '',
  37.                 position: '',
  38.                 address: '',
  39.                 phone: ''
  40.             }
  41.         };
  42.  
  43.         this.handleSubmit = this.handleSubmit.bind(this);
  44.         this.handleChange = this.handleChange.bind(this);
  45.         this.renderField  = this.renderField.bind(this);
  46.     }
  47.  
  48.     renderField(fieldConfig) {
  49.         return(
  50.           <div className="form-group" key={fieldConfig.name}>
  51.             <label className="col-sm-2 control-label">{fieldConfig.label}</label>
  52.             <div className="col-sm-10">
  53.               {/* how to use value={this.state.fields[iterate_key_here]} in this iteration method */}
  54.               <fieldConfig.type type="text" className="form-control" value={this.state.fields[key_here]} name={fieldConfig.name} onChange={this.handleChange}/>
  55.             </div>
  56.           </div>
  57.         );
  58.     }
  59.  
  60.     handleChange(e) {
  61.         const state = this.state.fields;
  62.  
  63.         state[e.target.name] = e.target.value;
  64.         this.setState(state);
  65.     }
  66.  
  67.     handleSubmit(e) {
  68.         e.preventDefault();
  69.  
  70.         // get form data out of state
  71.         const { fullname, position, address, phone } = this.state.fields;
  72.  
  73.         axios
  74.             .post(`${ROOT_URL}/staff`, { fullname, position, address, phone })
  75.             .then((res) => {
  76.                 console.log(res);
  77.             });
  78.     }
  79.  
  80.     render() {
  81.         return(
  82.             <div className="container" onSubmit={this.handleSubmit}>
  83.                 <form className="form-horizontal">
  84.                     {/* === Generate fields === */}
  85.                     {
  86.                         _.map(FIELDS, this.renderField)
  87.                     }
  88.                   <div className="form-group">
  89.                     <div className="col-sm-offset-2 col-sm-10">
  90.                       <button type="submit" className="btn btn-success">Save</button>
  91.                     </div>
  92.                   </div>
  93.                 </form>
  94.             </div>
  95.         );
  96.     }
  97. }
  98.  
  99. export default CreateStaff;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement