標簽的 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",

畢竟我需要將它移到文件的頂部，因為在我的情況下，如果我不將它移到頂部，我的規則就不起作用。