web-dev-qa-db-ja.com

eslint html-has-for with htmlFor in React

私は次のようなステートレスReactコンポーネントを持っています：

const propTypes = exact({
  fieldId: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
});

function Label({ fieldId, text }) {
  return (
    <label htmlFor={fieldId}>{text}</label>
  );
}

Label.propTypes = propTypes;

私はairbnb設定で拡張されたeslintを使用しています。私のエスリントは次のようになります。

{
  "extends": "airbnb"
}

私のReactコードはこのエラーをスローします：

error  Form label must have associated control  jsx-a11y/label-has-for

有効な一意のID文字列（他の場所の入力のIDと一致する）を使用してhtmlFor属性を明確に設定しました。確かにこれはこのルールを通過するのに十分ですか？

javascriptreactjseslinteslint-config-airbnb
6
Coop

htmlFor属性とidの設定に加えて、入力要素はラベル内にネストする必要があります。ただし、必要に応じて、ネスト要件をオフにすることができます。このようなもの：

{
  "extends": "airbnb",
  "rules": {
    "jsx-a11y/label-has-for": [ 2, {
      "required": {
          "every": [ "id" ]
      }
  }]
  }
}

問題に関連する問題： https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/314

ドキュメント： https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md

9
devk

<input/>タグとは別に使用したようです。 source docs によると、<input/>を<label/>内に配置する必要があります。または、.eslintrcを次のように設定できます

"rules": {
    "jsx-a11y/label-has-for": 0
 }
1
Igor

Eslintは、コードの他の場所でレンダリングされている入力要素を認識していません。発生しているエラーは、htmlFor属性自体について不平を言っているのではなく、それがわかる限り、htmlForがフォーム制御要素を参照していないことを不平を言っています（つまり、 -あなたの入力）。

同じコンポーネントでラベルと一緒に入力をレンダリングしてみてください。このエラーはなくなるはずです。

1
Donny West