标签的 EsLint 规则

Question

我有个问题

我的 esLint 规则：

"jsx-a11y/label-has-for": [ 2, {
      "components": [],
      "required": {
        "every": [ "nesting", "id" ]
      },
      "allowChildren": true
    }],

我只想解决这个错误，或者修复，请帮帮我

错误消息：表单标签必须与控件相关联。 (jsx-a11y/label-has-related-control)

JSX代码：

          <input
                type="checkbox"
                id="checkbox-2"
                className="checkbox__input"
            />
            <label
                htmlFor="checkbox-2"
                className="checkbox__label"
            />

Answer 1

我通过在我的eslint文件中添加以下eslint行来解决它

{
    ....
    "rules": {
      "jsx-a11y/label-has-associated-control": ["error", {
        "required": {
          "some": ["nesting", "id"]
        }
      }],
      "jsx-a11y/label-has-for": ["error", {
        "required": {
          "some": ["nesting", "id"]
        }
      }]
    },
    ...
}

添加这些行后don't forget to restart your local server 。

它仅在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

Answer 2

案例1：您可以在标签内输入

  <label>
      <input type="text"/>
  </label>

情况 2：使用 htmlFor

   <label htmlFor="first-name">
        First Name
   </label>
   <input type="text" id="first-name" />

您可以通过此页面查看规则的详细信息：

Answer 3

如果您只想关闭此警告，您可以在带有标签的行之前添加特殊注释：

<input type="text" id="myinput" />
<>{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }</>
<label htmlFor="myinput"></label>

在这里您可以找到许多其他用于禁用规则的 ESLint 内联注释： https ://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments

Answer 4

所以首先，对于这个规则，我需要这样写： "jsx-a11y/label-has-associated-control": "off",

然后我需要关闭这个： "jsx-a11y/label-has-for":"off",

毕竟我需要将它移到文件的顶部，因为在我的情况下，如果我不将它移到顶部，我的规则就不起作用。