javascript - JavaScript - 发送表单数据
问题描述
我正在尝试收集表单数据并将其作为有效负载发送到我的 ReactJS 组件中的 POST 请求中,如下所示:
handleSubmit = (event) => {
const data = new FormData(event.target);
event.preventDefault();
// There is a promise with XMLHttpRequest
}
return(
<div>
<div className="registration-block">
<form onSubmit={this.handleSubmit}>
// There are some inputs and submit button
</form>
</div>
{popup}
</div>
);
如您所见,我创建了一个函数 handleSubmit,我在 onSubmit 事件中调用它
在此函数中,构造new FormData(event.target);
返回空形式
从我的表单中收集数据并将其作为有效负载发送到 POST 请求的正确方法是什么?
解决方案
通常,您将希望在 React 中而不是在表单本身中维护表单状态。
请参阅以下文档:
https://reactjs.org/docs/forms.html。
一个工作示例如下所示:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
推荐阅读
- php - PHP中的重复单词
- maven - 如何在 Spring Boot 中模拟 resttemplate 调用?
- c - 如何使用一维数组在 C 中存储多个字符串或创建字符串数组?
- c# - 非常慢的 Entity Framework Core 查询
- python - List() 函数行为
- r - 如何在 VBA 中更新 Access 表单控件源之前完全执行批处理命令
- sqlite - sqlite的tsrange或daterange?
- python - 如何读取每行具有不同列的文件?
- java - 如何从 Spring Data JPA NativeQuery 接收一个集合?[导致 NotReadablePropertyException]
- sql - 选择日期最高的行