form内でbuttonクリック時に意図せぬsubmitを防ぐ

はじめに

<form/>内で<button type='submit'>の要素がクリックされるとサブミット処理が走るのはご存知かと思います。

Form.tsx

<form onSubmit={() => console.log('submit!!')}>
  <button type='submit'>
    送信
  </button>
</form>

問題点

問題点としては、buttonにtypeを指定しない場合もサブミット処理が走ってしまいます。
理由は、buttonのtype属性の初期値が type="submit"だからです。
なのでbuttonのtype属性は必ず指定するようにしましょう。

下記のような場合に、<button>モーダルオープン</button>をクリックしてもsubmit処理が走ってしまいます。

Form.tsx

<form onSubmit={() => console.log('submit!!')}>
  <button>モーダルオープン</button>
  <button type='submit'>
    送信
  </button>
</form>

対策

ESLintでButton要素にtype属性を付けることを強制させるように設定します。

.eslintrc

module.exports = {
  // ...省略
  rules: {
    'react/button-has-type': 'error',
  },
};

上記の設定追加により、buttonのtype属性未指定時にはエラーが出るようになりました。