[英]React Form onSubmit not firing within functional component
I have a form within a functional component called Payment.我在一个名为 Payment 的功能组件中有一个表单。 However when submitting the form by clicking the button the handler handleSubmitPayment(e) doesn't get called.
但是,当通过单击按钮提交表单时,不会调用处理程序 handleSubmitPayment(e)。 Nor is there any error message in the console.
控制台中也没有任何错误消息。
function Payment() {
function handleSubmitPayment(e) {
console.log("Form Submitted");
console.log(e);
}
return (
...
<form onSubmit={(e) => {console.log(e); handleSubmitPayment(e); /*e.preventDefault();*/}}>
<Row>
<Col>
<span className="payment_form_text">CC Number</span>
<input id="ccnumb" value=""/>
</Col>
</Row>
<Row>
<Col xs={6}>
<span className="payment_form_text">CC Exp</span>
<input id="ccexp" value=""/>
</Col>
<Col xs={6}>
<span className="payment_form_text">CVV</span>
<input id="cvv" value=""/>
</Col>
</Row>
<Button variant="success" id="payButton" type="submit" style={{ marginTop: 50 }}>
Pay
</Button>
</form>
...
)
}
export default Payment;
Please note these are dummy fields and I am not using a basic form to send raw payment data.请注意,这些是虚拟字段,我没有使用基本表单来发送原始付款数据。
What could be a possible reason for this?这可能是什么原因? Or what code changes do I need to deploy to make this work?
或者我需要部署哪些代码更改才能完成这项工作?
I can answer any more questions or provide more details if needed!如果需要,我可以回答更多问题或提供更多详细信息!
I may be misinterpreting what you're asking for here but I believe this is what you want?我可能会误解你在这里的要求,但我相信这就是你想要的? All I did was add
e.preventDefault()
to the handleSubmitPayment
function and then in onSubmit I called我所做的只是将
e.preventDefault()
添加到handleSubmitPayment
function 然后在 onSubmit 我调用
<form onSubmit={(e) => handleSubmitPayment(e)}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.