如何在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>

Javascript：

<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将类似的逻辑应用于函数组件。

更多详细信息：https://reactjs.org/docs/refs-and-the-dom.html