时间戳

首页 > 解决方案 > 将 onClick 添加到 React 表单中的提交按钮

javascript - 将 onClick 添加到 React 表单中的提交按钮

问题描述

按钮

（这个提交按钮不起作用，如果我删除了 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>

标签： javascriptreactjsevents

解决方案

这里的问题是，您的输入按钮元素具有提交类型。因此，当您单击它时，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()
}

推荐阅读