← Back to rules

react/checked-requires-onchange-or-readonly 严谨

An auto-fix is available for this rule.

它的作用

此规则强制要求输入元素的 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

参考资料

• 规则源码