Правило EsLint для метки
у меня проблема
Мои правила 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"
/>
Да, но никто не работал
Пожалуйста, добавьте сообщение об ошибке в виде текста в вопрос, чтобы будущие пользователи могли его найти.
@CR7 Пожалуйста, опубликуйте код JSX в виде текста, как оригинальный, так и с попыткой исправить.
Пожалуйста, опубликуйте свою конфигурацию для jsx-a11y/label-has-associated-control. Если это похоже на jsx-a11y/label-has-for, то я считаю, что проблема в том, что вы требуете, чтобы входные элементы были дочерними элементами их соответствующей метки (nesting). Если вы не хотите такого поведения, не включайте эту опцию (и вообще: ознакомьтесь с правилами/параметрами, которые вы включаете. Нет смысла их использовать, если вы не знаете, как решить проблему) .
Конечно, я хочу его отключить, но ошибка не исправлена, у меня нет связанного управления. Я пытаюсь отключить эту команду jsx-a11y/label-has-for:"off"
На вашем скриншоте хорошо видно, что применяется правило jsx-a11y/label-has-associated-control, значит оно у вас так или иначе включено. В любом случае вы получаете сообщение об ошибке, потому что вы требуете, чтобы входные данные и метки были вложенными. и имеют идентификаторы. Но в вашем коде у них есть только ID, они не вложенные. Так что либо вложите их, либо удалите опцию.
@FelixKling, как я могу удалить опцию?
Откройте файл правил eslint в текстовом редакторе, в строке "every": [ "nesting", "id" ] щелкните после запятой (,), чтобы поместить туда курсор, нажимайте клавишу возврата, пока вся часть "nesting", не будет удалена, затем сохраните файл.
@FelixKling не работает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.
удаление правила не является решением
Случай 1: Вы можете вводить данные внутри метки
<label>
<input type = "text"/>
</label>
случай 2: используйте htmlFor
<label htmlFor = "first-name">
First Name
</label>
<input type = "text" id = "first-name" />
вы можете ознакомиться с деталями правил на этой странице:
в моем коде мне пришлось объединить оба случая: 1) использовать ввод внутри метки и использовать htmlFor (он работает только с тегом без какого-либо атрибута)
только случай 2 работал для меня
Если вы хотите просто отключить это предупреждение, вы можете добавить специальный комментарий непосредственно перед строкой с меткой:
<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
Я решил это, добавив следующие строки в свой файл 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 не совпадают. Это вообще возможно?
Согласно документации,
jsx-a11y/label-has-forустарел, и вам следует удалить это правило. В документации дляjsx-a11y/label-has-associated-controlесть раздел о том, как устранить эту ошибку: github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/…. Вы это читали?