[英]How can I handle input post action in js?
I want to send the input of a <form/>
with a post action to another js-file. 我想将带有后操作的<form/>
输入发送到另一个js文件。 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. 目前应处理传入数据的js文件为空。
How can i get the send data or is there a better practice to perform this operation? 我如何获取发送数据,或者有更好的实践来执行此操作?
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 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
: 并在当前文件中导入此函数并在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. 希望这能解决您的问题。 :) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.