如何使用React发送表单数据 [英] How to send form data with react
问题描述
我有一个使用这种方法的webapi:
I have a webapi with this method:
public async Task<IHttpActionResult> PutTenant(string id, Tenant tenant, HttpPostedFile certificateFile)
{
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["AzureStorageKey"].ToString());
// Create the blob client.
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Retrieve reference to a previously created container.
CloudBlobContainer container = blobClient.GetContainerReference(ConfigurationManager.AppSettings["certificatesContainer"].ToString());
// Retrieve reference to a blob named "myblob".
CloudBlockBlob blockBlob = container.GetBlockBlobReference("myblob");
// Create or overwrite the "myblob" blob with contents from a local file.
blockBlob.Properties.ContentType = certificateFile.ContentType;
blockBlob.UploadFromStream(certificateFile.InputStream);
var tenantStore = CosmosStoreFactory.CreateForEntity<Tenant>();
tenant.CertificatePath = blockBlob.Uri;
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != tenant.TenantId)
{
return BadRequest();
}
var added = await tenantStore.AddAsync(tenant);
return StatusCode(HttpStatusCode.NoContent);
}
现在我有一个反应形式:
Now I have a form in react:
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';
import axios from 'axios';
const API_SERVER = "example.azure.com/upload";
export default class extends Component {
constructor(props) {
super(props);
}
upload(e) {
let data = new FormData();
//Append files to form data
let files = e.target.files;
for (let i = 0; i < files.length; i++) {
data.append('files', files[i], files[i].name);
}
let d = {
method: 'post',
url: API_SERVER,
data: data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
},
},
onUploadProgress: (eve) => {
let progress = utility.UploadProgress(eve);
if (progress == 100) {
console.log("Done");
} else {
console.log("Uploading...",progress);
}
},
};
let req = axios(d);
return new Promise((resolve)=>{
req.then((res)=>{
return resolve(res.data);
});
});
}
render(){
const { data } = this.state;
const { rowStyle, colStyle, gutter } = basicStyle;
return (
<div>
<LayoutWrapper>
<PageHeader>{<IntlMessages id="pageTitles.TenantAdministration" />}</PageHeader>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={12} sm={12} xs={24} style={colStyle}>
<Box
title={<IntlMessages id="pageTitles.TenantAdministration" />}
subtitle={<IntlMessages id="pageTitles.TenantAdministration" />}
>
<ContentHolder>
{//Put Form here with file upload.
}
<form>
Name: <input type="text" name="tenanturl" />
Password: <input type="text" name="password" />
<input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
<input type="submit" value="Submit" />
</form>
</ContentHolder>
</Box>
</Col>
</Row>
</LayoutWrapper>
</div>
);
}
}
承租人对象具有2个字符串属性,其形式相同. 如何将这两个字符串属性作为租户对象发送?如何触发提交表单?
The tenant object has 2 string properties which are the same in the form. How do I send those 2 string properties as a Tenant object? How do I trigger the submit form?
react btw中新出现的表单
new to forms in react btw
推荐答案
这是我的示例.基本上,我将定义要发送到API的属性.在这种情况下,我使用axios
Here is my sample. Basically I will define properties I want to send to API. In this case I use axios
const data = {
Username: this.state.username,
Email: this.state.email,
}
axios
.post(url, data)
.then(data => {
//something
})
.catch(error => {
//something
});
在我的API控制器中,我将使用[FormBody]标签接收正在传递到服务器的数据
And in my API controller I will receive data being pass to server by using [FormBody] tag
public async Task<IActionResult> AddNewUser([FromBody] UserInputViewModel userInputVm)
请根据您的代码进行相应调整.让我知道您是否有任何问题.
Please adjust accordingly with your code. Let me know if you have any issue.
这篇关于如何使用React发送表单数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!