如何使用React.js中的表单进行发帖

时间:2019-01-14 14:27:40

标签: javascript reactjs forms

我有一个API-1,这是一个get请求,现在我必须以主体作为API-1的响应向API-2发出POST请求。我必须使用表格来实现此目的,因为我无法进行该API阻止了CORS的ajax调用。 API1Callback是API-1的回调方法

 API1Callback =(json) => {

    let url = json.BaseURL;
    <form id="myform" method="post" action={url} name ="myform">
            <input type="hidden" name="AccountID" value={json.AccountID}/>
            <input type="hidden" name="Amount" value={json.Amount}/>
            <input type="hidden" name="ProductID" value={json.ProductID}/>
            <input type="hidden" name="ProductName" value={json.ProductName}/>
          </form>
          document.getElementById("myform").submit();

    }

但是这不起作用,不会发出发布请求。

1 个答案:

答案 0 :(得分:0)

我们可以使用React-ref解决这个问题

import React, { Component } from 'react'


class SDPRedirectInterstitialSF extends Component {

  constructor(props) {
      super(props);
     this.formElement=React.createRef();
    }

  render() {
    return(
            <form ref={this.formElement} action="http://payment/do" method="post" >
            <input type="hidden" name="AccountID" value={this.props.json.AccountID}/>
            <input type="hidden" name="SiteID" value={this.props.json.SiteID}/>

          <input type="hidden" name="Amount" value={this.props.json.Amount}/>

            <input type="hidden" name="ProductID" value={this.props.json.ProductID}/>
           <input type="hidden" name="ProductName" value={this.props.json.ProductName}/>

           </form>
       );
 }

  componentDidMount() 
  {
    this.formElement.current.submit();
  }
}

+export default SDPRedirectInterstitialSF