Skip to content
← Back to rules

react/button-has-type 制限

何をするか

すべての button HTML 要素に対して明示的な type 属性を強制します。

なぜ問題なのか

button HTML 要素の type 属性のデフォルト値は "submit" ですが、これは多くの場合望ましくなく、予期せぬページ再読み込みを引き起こす可能性があります。

このルールに対する誤りなコードの例:

jsx
<button />
<button type="foo" />

このルールに対する正しいコードの例:

jsx
<button type="button" />
<button type="submit" />

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け入れます:

button

type: boolean

default: true

true であれば、type="button" を許可します。

reset

type: boolean

default: true

true であれば、type="reset" を許可します。

submit

type: boolean

default: true

true であれば、type="submit" を許可します。

使用方法

このルールを設定ファイルまたは CLI で有効化するには、次のように使用できます:

json
{
  "plugins": ["react"],
  "rules": {
    "react/button-has-type": "error"
  }
}
bash
oxlint --deny react/button-has-type --react-plugin

参照