簡體   English   中英

將 onClick 添加到 React 表單中的提交按鈕

[英]Add an onClick to a submit button in React form

按鈕

(這個提交按鈕不工作,如果我刪除 onClick,提交工作。我怎樣才能讓 onClick 和提交工作。)

 <input
       type="submit"
       value="Make the purchase"
       onClick={nextStep}
 />

整個表格

 <form id="my-form" className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="name" value={shippingData.firstName} />
      <br />
      <input type="hidden" name="name" value={shippingData.lastName} />
      <br />
      <input type="hidden" name="name" value={shippingData.email} />
      <br />
      <input type="hidden" name="name" value={shippingData.address1} />
      <br />
      <input type="hidden" name="name" value={shippingData.zip} />
      <br />

      <input type="hidden" name="name" value={myJSON}></input>
      <div>
        <input
          type="submit"
          value="Make the purchase"
          onClick={nextStep}
        />
      </div>
    </form>

這里的問題是,您的輸入按鈕元素具有提交類型。 因此,當您單擊它時,會調用onSubmit處理程序。 所以如果你需要做多個事情,你需要多個按鈕,或者在onSubmit里面做所有事情

選項1

有 2 個按鈕:

 <input
    type="submit"
    value="Make the purchase"/> 

<input 
    type="button"
    value="Go to next step"
    onClick={nextStep} />

選項 2

<form id="my-form" className="contact-form" onSubmit={handleSubmit}>

const handleSubmit = () => {
  nextStep()
  sendEmail()
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM