标签的 EsLint 规则答案

【问题标题】：EsLint rule for label标签的 EsLint 规则
【发布时间】：2019-01-30 17:52:48
【问题描述】：

我有问题

我的 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"
            />

【问题讨论】：

根据文档，jsx-a11y/label-has-for 已弃用，您应该删除该规则。 jsx-a11y/label-has-associated-control 的文档有一个关于如何解决此错误的部分：github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/…。你读了吗？
是的，但没有人不工作
请将错误消息作为文本添加到问题中，以便将来的用户可以搜索到
@CR7 请将 JSX 代码作为文本发布，包括原始代码和试图修复它的代码
请为jsx-a11y/label-has-associated-control 发布您的配置。如果它与jsx-a11y/label-has-for 的相似，那么我认为问题在于您要求输入元素是它们各自标签的子元素（nesting）。如果您不想要这种行为，请不要启用该选项（通常：让自己熟悉您正在启用的规则/选项。如果您不知道如何解决问题，则使用它们毫无意义） .

标签： javascript reactjs

【解决方案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:

编辑：

根据文档：

案例：标签是控件的兄弟。

<label htmlFor={domId}>Surname</label>
<input type="text" id={domId} />

【讨论】：

在我的代码中，我必须结合这两种情况：1）在标签内使用输入并使用htmlFor（它只使用没有任何属性的标签）
案例 2 单独为我工作

【解决方案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

【讨论】：

当htmlFor 和id 不匹配时，这不会显示错误。这可能吗？

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

所以首先，为了关闭这条规则，我需要写这个："jsx-a11y/label-has-associated-control": "off",

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

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

【讨论】：

我相信你的意思不是“关闭”，而是 0：“jsx-a11y/label-has-associated-control”：0
@JWoodchuck "off" 和 0 在切换 es-lint 规则时具有相同的效果。
删除规则不是解决办法