How can I handle input post action in js?

Question

I want to send the input of a <form/> with a post action to another js-file. This file should handle the data to invoke a ordering process.

import React from "react";

class Order extends React.Component {

constructor() {
    super();
};
/*
componentWillMount() {
};

componentWillUnmount() {
};

refresh() {
};
*/
render() {
    return (
        <div>
            <h1>Delivery-Adress</h1>
            <form className="pure-form-stacked" action="">
                <label htmlFor="name">Name: 
                <input id="name" name="name" type="text" required></input>
                </label>
                <br/>
                <label htmlFor="street">Street: 
                <input id="street" name="street" type="text" required></input>
                </label>
                <br/>
                <label htmlFor="city">City: 
                <input id="city" name="city" type="text" required></input>
                </label>
                <br/>
                <label htmlFor="email">E-Mail: 
                <input id="email" name="email" type="email" required></input>
                </label>
                <br/>

                <input type="submit" value="deliever" formmethod="post" formaction="OrderProcess.js"></input>
            </form>
        </div>
    )
  }
}

export default Order;

The js file that should handle the incoming data is empty at the moment.
How can i get the send data or is there a better practice to perform this operation?

Answer 1

If you are looking to process the form data from this component through a function, you should import that function in this file itself. So this is how it'll go !

new-file.js

export default function(data){
  console.log('this is the form data');
}

and in the current file, import this function and use it onSubmit :

import React from "react";
import newFunction from 'new-file.js';

class Order extends React.Component {

constructor() {
    super();
};
/*
componentWillMount() {
};

componentWillUnmount() {
};

submit: function(e){
  e.preventDefault();
  newFunction();
  alert('form submitted !');
};

refresh() {
};
*/
render() {
    return (
        <div>
            <h1>Delivery-Adress</h1>
            <form className="pure-form-stacked" action="" onSubmit={this.submit}>
                <label htmlFor="name">Name: 
                <input id="name" name="name" type="text" required></input>
                </label>
                <br/>
                <label htmlFor="street">Street: 
                <input id="street" name="street" type="text" required></input>
                </label>
                <br/>
                <label htmlFor="city">City: 
                <input id="city" name="city" type="text" required></input>
                </label>
                <br/>
                <label htmlFor="email">E-Mail: 
                <input id="email" name="email" type="email" required></input>
                </label>
                <br/>

                <input type="submit" value="deliever" formmethod="post" formaction="OrderProcess.js"></input>
            </form>
        </div>
    )
  }
}

export default Order;

Hope this will solve your problem. :)