如何在 React JS 中形成加载时提交？

Question

在 ReactJS 中加载页面时如何提交form？

<form id="redirectForm" method="post" action="https://test.cashfree.com/billpay/checkout/post/submit">

  <input type="text" name="appId" value={this.state.appId}/>

  <input type="text" name="orderId" value={this.state.orderId}/>

  <input type="text" name="orderAmount" value={this.state.orderAmount}/>

  <input type="text" name="orderCurrency" value={this.state.orderCurrency}/>

  <input type="text" name="orderNote" value={this.state.orderNote} />

  <input type="text" name="customerName" value={this.state.customerName}/>

  <input type="text" name="customerEmail" value={this.state.customerEmail} />

  <input type="text" name="customerPhone" value={this.state.customerPhone} />

  <input type="text" name="returnUrl" value={this.state.returnUrl} />

  <input type="text" name="notifyUrl" value={this.state.notifyUrl} />

  <input type="text" name="signature" value={this.state.signature}/>

  <button type="submit">Pay</button>

</form>

Java脚本：

<script>document.getElementById("redirectForm").submit();</script>

Answer 1

你实际上可以为表单创建一个ref，如果组件是类组件，你可以用来componentDidMount提交表单，或者如果是功能组件，你可以通过useEffect<form ref={item => this.form = item} id="redirectForm" method="post" action="https://test.cashfree.com/billpay/checkout/post/submit"> .....</form>在您的 React 组件中，您可以使用以下方法创建 ref：class SampleClass extends React.Component {   constructor() {     this.form = null   }   componentDidMount() {    this.form.submit();   }}您可以使用 useRef 和 useEffect 将类似的逻辑应用于功能组件。