← Back to rules

react/checked-requires-onchange-or-readonly 細かい

何を実行するか

このルールは、input 要素の checked プロパティに対して onChange または readOnly 属性が指定されていることを強制します。
また、checked と defaultChecked プロパティが同時に使用された場合にも警告を出します。

なぜ問題なのか

一般的に、checked は onChange または readOnly のいずれかとともに使うべきです。

さらに、checked と defaultChecked を同時に使用することは誤りである可能性が高く、これらは入力要素のチェック状態を制御する際に互いに排他的な方法です。

例

このルールに対する不正なコードの例：

<input type="checkbox" checked />
<input type="checkbox" checked defaultChecked />
<input type="radio" checked defaultChecked />

React.createElement('input', { checked: false });
React.createElement('input', { type: 'checkbox', checked: true });
React.createElement('input', { type: 'checkbox', checked: true, defaultChecked: true });

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

<input type="checkbox" checked onChange={() => {}} />
<input type="checkbox" checked readOnly />
<input type="checkbox" checked onChange readOnly />
<input type="checkbox" defaultChecked />

React.createElement('input', { type: 'checkbox', checked: true, onChange() {} });
React.createElement('input', { type: 'checkbox', checked: true, readOnly: true });
React.createElement('input', { type: 'checkbox', checked: true, onChange() {}, readOnly: true });
React.createElement('input', { type: 'checkbox', defaultChecked: true });

設定

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

ignoreExclusiveCheckedAttribute

type: boolean

default: false

checked と defaultChecked が同時に使用されてはならないという制限を無視する。

ignoreMissingProperties

type: boolean

default: false

checked プロパティが存在する場合、onChange または readOnly を提供する必要があるという要件を無視する。

使用方法

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

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/checked-requires-onchange-or-readonly": "error"
  }
}

CLI

oxlint --deny react/checked-requires-onchange-or-readonly --react-plugin

参照

• ルールのソース