[英]EsLint rule for label
i have a problem我有个问题
My esLint rules:我的 esLint 规则:
"jsx-a11y/label-has-for": [ 2, {
"components": [],
"required": {
"every": [ "nesting", "id" ]
},
"allowChildren": true
}],
I want just for off this error, or fix, help me please我只想解决这个错误,或者修复,请帮帮我
Error msg: A form label must be associated with a control.错误消息:表单标签必须与控件相关联。 (jsx-a11y/label-has-associated-control) (jsx-a11y/label-has-related-control)
JSX code: JSX代码:
<input
type="checkbox"
id="checkbox-2"
className="checkbox__input"
/>
<label
htmlFor="checkbox-2"
className="checkbox__label"
/>
I solved it by adding the below lines in my eslint
file我通过在我的eslint
文件中添加以下eslint
行来解决它
{
....
"rules": {
"jsx-a11y/label-has-associated-control": ["error", {
"required": {
"some": ["nesting", "id"]
}
}],
"jsx-a11y/label-has-for": ["error", {
"required": {
"some": ["nesting", "id"]
}
}]
},
...
}
and don't forget to restart your local server
after adding those lines.添加这些行后don't forget to restart your local server
。
it's only working when the label htmlFor(React) or for(HTML)
and input id
is matched.它仅在label htmlFor(React) or for(HTML)
和input id
匹配时才有效。
<label htmlFor="temp-id">Label</label>
<input type="text" id="temp-id" />
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/302#issuecomment-425512505 https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/302#issuecomment-425512505
Case 1: You can make input inside label案例1:您可以在标签内输入
<label>
<input type="text"/>
</label>
case 2: use htmlFor情况 2:使用 htmlFor
<label htmlFor="first-name">
First Name
</label>
<input type="text" id="first-name" />
you can go through the details of rules through this page: 您可以通过此页面查看规则的详细信息:
If you want just for off this warning you can add the special comment just before the line with the label:如果您只想关闭此警告,您可以在带有标签的行之前添加特殊注释:
<input type="text" id="myinput" />
<>{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }</>
<label htmlFor="myinput"></label>
Here you can find many other ESLint inline comments for disabling rules: https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments在这里您可以找到许多其他用于禁用规则的 ESLint 内联注释: https ://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
So first of all, for off this rule i needed to wrote this: "jsx-a11y/label-has-associated-control": "off",
所以首先,对于这个规则,我需要这样写: "jsx-a11y/label-has-associated-control": "off",
then i need to off this: "jsx-a11y/label-has-for":"off",
然后我需要关闭这个: "jsx-a11y/label-has-for":"off",
And after all i needed to move it at the top of the file because in my case if i don`t move it to the top, my rule not worked.毕竟我需要将它移到文件的顶部,因为在我的情况下,如果我不将它移到顶部,我的规则就不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.