标签的EsLint规则

Question

我有个问题

​

​

我的esLint规则：

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

我只是想摆脱这个错误，或者修复，请帮帮我

错误消息:窗体标签必须与控件关联。(jsx-a11y/label-has-associated control)

JSX代码：

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

Answer 1

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

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

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

Answer 2

我通过在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 3

案例1:可以在标签内部输入

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

案例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: