Advertisement
rhuntington

I don't even know....

Dec 11th, 2018
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //form.js file to send a request to back end
  2.  
  3. import React, { Component } from 'react';
  4. import axios from 'axios';
  5.  
  6. export default class Form extends Component {
  7.     constructor(props) {
  8.         super(props);
  9.  
  10.         this.onChangeParameter = this.onChangeParameter.bind(this);
  11.         this.onChangeParamValue = this.onChangeParamValue.bind(this);
  12.         this.onSubmit = this.onSubmit.bind(this);
  13.  
  14.         this.state = {
  15.             parameter: '',
  16.             paramValue: ''
  17.         }
  18.     }
  19.  
  20.     onChangeParameter(e) {
  21.         this.setState({parameter: e.target.value});
  22.     }
  23.  
  24.     onChangeParamValue(e) {
  25.         this.setState({paramValue: e.target.value});
  26.     }
  27.  
  28.     onSubmit(e) {
  29.         e.preventDefault();
  30.         const params = {
  31.             parameter: this.state.parameter,
  32.             paramValue: this.state.paramValue
  33.         }
  34.         axios.get('http://localhost:3000/src/server.js/sample', params).then((response) => {
  35.             console.log(response);
  36.         })
  37.         .catch((error) => {
  38.             console.log(error);
  39.         });
  40.     }
  41.  
  42.     render() {
  43.         return(
  44.             <form className="container text-center" onSubmit={this.onSubmit}>
  45.                 <h3 className="text-warning">Search for Characters to Manage</h3>
  46.                 <div className="form-group">
  47.                     <select className="form-control btn btn-lg" name="parameter" value={this.state.value} onChange={this.onChangeParameter}>
  48.                         <option>SELECT</option>
  49.                         <option value="1">Charid</option>
  50.                         <option value="2">Character Name</option>
  51.                         <option value="3">Username</option>
  52.                         <option value="4">Forum Account</option>
  53.                     </select>
  54.                 </div>
  55.                 <div className="form-group">
  56.                 <label>-Enter parameter to search by-</label>
  57.                     <input
  58.                         type="text"
  59.                         className="form-control text-center"
  60.                         name="paramValue"
  61.                         placeholder="12345"
  62.                         value={this.state.value}
  63.                         onChange={this.onChangeParamValue}
  64.                         required
  65.                     />
  66.                 </div>
  67.                 <button className="btn btn-lg btn-primary" type="submit" name="submitBtn">Search</button>
  68.             </form>
  69.         );
  70.     }
  71. }
  72.  
  73. ---------------------------------
  74. //server.js file to receive request and do something with it
  75.  
  76. const express = require('express');
  77. const app = express();
  78.  
  79. const PORT = process.env.PORT || 3000;
  80.  
  81. app.use(express.static('public'));
  82. app.get('/sample:parameter/sample:paramValue', (req, res) => {
  83.     let list = ["item1", "item2", "item3"];
  84.     res.json(list);
  85.     console.log('Sent list of items');
  86. });
  87.  
  88. app.listen(PORT, () => {
  89.     console.log(`Listening on port ${PORT}`);
  90. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement