React js 错误：表单标签必须与控件关联

Question

我找到了一些有关此错误的主题，但没有一个能解决问题..

这是我的代码：

        <input
          type="radio"
          name="variationType"
          value="pa_pay_baga"
          onChange={(e) => {
            props.handleChange(e, 'pa_pay_baga');
          }}
          className="btn-check"
          id="btn-check5"
        />
        <label htmlFor="btn-check5" className="btn btn-primary-border">
          bla bla
        </label>

这是我的 lint 配置：

 "jsx-a11y/label-has-for": [ 0, {
  "components": [ "Label" ],
  "required": {
    "some": [ "id" ]
  }
}],

我错过了什么？

Answer 1

这个 eslint 规则实际上是 [已弃用] label-has-for - 我会调整它以关闭该规则并启用新规则 label-has-linked-control 例如

 "jsx-a11y/label-has-for": "off",
"label-has-associated-control": "warn",

这个新规则要求它们共享一个共同的父级，所以配置如下：

<label htmlFor="btn-check5" className="btn btn-primary-border">
       bla bla

        <input
          type="radio"
          name="variationType"
          value="pa_pay_baga"
          onChange={(e) => {
            props.handleChange(e, 'pa_pay_baga');
          }}
          className="btn-check"
          id="btn-check5"
        />
</label>

Answer 2

请检查此 Github 问题，很快该消息似乎具有误导性，并且还要求将标签作为输入的父级：

     
        <label htmlFor="btn-check5" className="btn btn-primary-border">
          <input
          type="radio"
          name="variationType"
          value="pa_pay_baga"
          onChange={(e) => {
            props.handleChange(e, 'pa_pay_baga');
          }}
          className="btn-check"
          id="btn-check5"
        />
        </label>

Answer 3

我也遇到了同样的 eslist 警告问题

A form label must be associated with a control.

然后我通过查看@Kieran Osgood的解释自行实现了解决方案。

所以您需要确保

<input>

标签位于

<label>

标签内，并为

htmlFor

标签添加与

id

匹配的

<label>

属性。

这就是你的代码的样子：

          <label htmlFor="btn-check5" className="btn btn-primary-border">
            bla bla
            <input
              type="radio"
              name="variationType"
              value="pa_pay_baga"
              onChange={(e) => {
                props.handleChange(e, 'pa_pay_baga');
              }}
              className="btn-check"
              id="btn-check5"
            />
          </label>