Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //form.js file to send a request to back end
- import React, { Component } from 'react';
- import axios from 'axios';
- export default class Form extends Component {
- constructor(props) {
- super(props);
- this.onChangeParameter = this.onChangeParameter.bind(this);
- this.onChangeParamValue = this.onChangeParamValue.bind(this);
- this.onSubmit = this.onSubmit.bind(this);
- this.state = {
- parameter: '',
- paramValue: ''
- }
- }
- onChangeParameter(e) {
- this.setState({parameter: e.target.value});
- }
- onChangeParamValue(e) {
- this.setState({paramValue: e.target.value});
- }
- onSubmit(e) {
- e.preventDefault();
- const params = {
- parameter: this.state.parameter,
- paramValue: this.state.paramValue
- }
- axios.get('http://localhost:3000/src/server.js/sample', params).then((response) => {
- console.log(response);
- })
- .catch((error) => {
- console.log(error);
- });
- }
- render() {
- return(
- <form className="container text-center" onSubmit={this.onSubmit}>
- <h3 className="text-warning">Search for Characters to Manage</h3>
- <div className="form-group">
- <select className="form-control btn btn-lg" name="parameter" value={this.state.value} onChange={this.onChangeParameter}>
- <option>SELECT</option>
- <option value="1">Charid</option>
- <option value="2">Character Name</option>
- <option value="3">Username</option>
- <option value="4">Forum Account</option>
- </select>
- </div>
- <div className="form-group">
- <label>-Enter parameter to search by-</label>
- <input
- type="text"
- className="form-control text-center"
- name="paramValue"
- placeholder="12345"
- value={this.state.value}
- onChange={this.onChangeParamValue}
- required
- />
- </div>
- <button className="btn btn-lg btn-primary" type="submit" name="submitBtn">Search</button>
- </form>
- );
- }
- }
- ---------------------------------
- //server.js file to receive request and do something with it
- const express = require('express');
- const app = express();
- const PORT = process.env.PORT || 3000;
- app.use(express.static('public'));
- app.get('/sample:parameter/sample:paramValue', (req, res) => {
- let list = ["item1", "item2", "item3"];
- res.json(list);
- console.log('Sent list of items');
- });
- app.listen(PORT, () => {
- console.log(`Listening on port ${PORT}`);
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement