#javascript #reactjs #forms
#javascript #reactjs #формы
Вопрос:
Как мне отправить a form при загрузке страницы в ReactJS?
<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>
Комментарии:
1. может быть, это может помочь tutorialspoint.com/reactjs/reactjs_forms.htm
2. На самом деле вы можете сделать то же самое в react внутри componentDidMount для более старых версий или внутри useEffect (без зависимостей)
3. @kimobrian254 поделитесь примером кода document.getElementById(«redirectForm»).submit() как в react js
4. @ManjuanthVM react запускает обычный JS, поэтому просто выполнение
document.getElementById("redirectForm").submit();будет работать так, как ожидалось. Как я уже сказал внутри componentDidMount для более старых версий внутри useEffect для более новых версий react.5. @kimobrian254 спасибо, все работает, хорошего дня
Ответ №1:
На самом деле вы можете создать ссылку для формы, и если компонент является компонентом класса, вы можете использовать componentDidMount для отправки формы, или, если функциональный компонент, вы можете сделать это через useEffect
<form ref={item => this.form = item} id="redirectForm" method="post" action="https://test.cashfree.com/billpay/checkout/post/submit">
.....
</form>
В вашем компоненте React вы можете создать ссылку с помощью:
class SampleClass extends React.Component {
constructor() {
this.form = null
}
componentDidMount() {
this.form.submit();
}
}
Аналогичную логику можно применить к функциональному компоненту, используя useRef и useEffect.