如何處理js中的輸入后操作？

Question

我想將帶有后操作的<form/>輸入發送到另一個js文件。 該文件應處理數據以調用排序過程。

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;

目前應處理傳入數據的js文件為空。
我如何獲取發送數據，或者有更好的實踐來執行此操作？

Answer 1

如果要通過函數處理此組件中的表單數據，則應將該函數導入此文件本身。 所以這是怎么回事！

new-file.js

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

並在當前文件中導入此函數並在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;

希望這能解決您的問題。 :)