Skip to content
← Back to rules

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

作用

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

为什么这不好?

checked 一般应始终与 onChangereadOnly 之一一起使用。

同时使用 checkeddefaultChecked 很可能是错误,因为它们是控制 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

忽略 checkeddefaultChecked 不应同时使用的限制。

ignoreMissingProperties

type: boolean

default: false

当存在 checked 属性时,忽略必须提供 onChangereadOnly 之一的要求。

如何使用

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 中添加。

参考资料