如何使用React发送表单数据

本文介绍了如何使用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/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.