React Form onSubmit 未在功能組件內觸發

Question

我在一個名為 Payment 的功能組件中有一個表單。 但是，當通過單擊按鈕提交表單時，不會調用處理程序 handleSubmitPayment(e)。 控制台中也沒有任何錯誤消息。

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;

請注意，這些是虛擬字段，我沒有使用基本表單來發送原始付款數據。

這可能是什么原因？ 或者我需要部署哪些代碼更改才能完成這項工作？

如果需要，我可以回答更多問題或提供更多詳細信息！

Answer 1

我可能會誤解你在這里的要求，但我相信這就是你想要的？ 我所做的只是將e.preventDefault()添加到handleSubmitPayment function 然后在 onSubmit 我調用

<form onSubmit={(e) => handleSubmitPayment(e)}>