Skip to content
← Back to rules

react/checked-requires-onchange-or-readonly Pedantic

作用 ​

此规则要求 input 元素的 checked 属性必须同时提供 onChange 或 readOnly。 当同时使用 checked 和 defaultChecked 属性时,也会发出警告。

为什么这不好? ​

checked 一般应始终与 onChange 或 readOnly 之一一起使用。

同时使用 checked 和 defaultChecked 很可能是错误,因为它们是控制 input 元素 checked 状态的互斥方式。

示例 ​

以下是此规则的 错误 代码示例:

jsx
<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 });

以下是此规则的 正确 代码示例:

jsx
<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 之一的要求。

如何使用 ​

To enable this rule using the config file or in the CLI, you can use:

json
{
  "plugins": ["react"],
  "rules": {
    "react/checked-requires-onchange-or-readonly": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/checked-requires-onchange-or-readonly": "error",
  },
});
bash
oxlint --deny react/checked-requires-onchange-or-readonly --react-plugin

版本 ​

此规则在 v0.2.15 中添加。

参考资料 ​