javascript - 如何使用react发送表单数据

Question

我有一个使用此方法的 webapi:

 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); 
        }

现在我有一个 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 个字符串属性，它们的形式相同。 如何将这 2 个字符串属性作为租户对象发送？如何触发提交表单？

顺便说一下，R​​eact 中的表单新手

Answer 1

这是我的样本。基本上我将定义要发送到 API 的属性。在本例中我使用 axios

const data = {
    Username: this.state.username,
    Email: this.state.email,
}

axios
      .post(url, data)
      .then(data => {
        //something
      })
      .catch(error => {
        //something
      });

在我的 API Controller 中，我将使用 [FormBody] 标签接收传递到服务器的数据

public async Task<IActionResult> AddNewUser([FromBody] UserInputViewModel userInputVm)

请根据您的代码进行相应调整。如果您有任何问题，请告诉我。