Как сделать почтовый звонок с помощью форм в Reactjs

Question

У меня есть API-1, который является запросом get, теперь я должен сделать POST-запрос к API-2 с телом в ответ на API-1. Я должен использовать формы для достижения этой цели, так как я не могу сделать вызов ajax как CORS заблокирован для этого API. 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();

    }

Однако это не работает, пост-запрос не сделан.

Answer 1

Мы можем использовать 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