标签的 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文件中添加以下几行来解决它

{
    ....
    "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

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

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

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