HTMLのform内でsubmitしないボタン

buttonにtype属性を持たせてやればいい

<form onSubmit={handleSubmit} className="has-text-centered">
  <div style={cardStyles}>
    <fieldset style={cardMain}>
      <legend style{legendStyles}>
      </legend>
      <label style={priceStyles}>
      </label>
    </fieldset>
    <button
      type="button"
      onClick={(e) => handleAddItem(e)}
      disabled={loading}>追加する</button>
    <button>購入する</button>
  </div>
</form>

上のコードでは追加するボタンはhandleAddItem関数が実行される
購入するボタンを押すとhandleSubmitが実行される

この記事が気に入ったらサポートをしてみませんか?