代码之家 › 专栏 › 技术社区 › Shubham Chopra

如何使用ReactJS中的窗体进行后期调用

forms reactjs javascript

Shubham Chopra · 技术社区 · 6 年前

我有一个API-1,它是一个GET请求,现在我必须向API-2发出一个POST请求,主体作为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();

    }

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

1 回复 | 直到 6 年前

Shubham Chopra 6 年前

我们可以用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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前