← Back to rules

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

작동 방식

이 규칙은 입력 요소의 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

기본값: false

checked와 defaultChecked가 함께 사용되지 않아야 하는 제약을 무시합니다.

ignoreMissingProperties

type: boolean

기본값: false

checked 속성이 존재할 때 onChange 또는 readOnly를 제공해야 하는 조건을 무시합니다.

사용 방법

이 규칙을 구성 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음과 같이 사용할 수 있습니다:

Config (.oxlintrc.json)

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

CLI

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

참고자료

• 규칙 소스