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

【问题标题】：React js error: A form label must be associated with a controlReact js错误：表单标签必须与控件相关联
【发布时间】：2021-11-10 09:47:06
【问题描述】：

我发现了一些关于这个错误的主题，但没有一个能解决问题..

这是我的代码：

        <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" ]
  }
}],

我错过了什么？

【问题讨论】：

标签： reactjs react-hooks eslint lint

【解决方案1】：

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

     
        <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>

【讨论】：

【解决方案2】：

这个 eslint 规则实际上是 [deprecated] label-has-for - 我会调整它以关闭规则并启用新规则 label-has-associated-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>

【讨论】：

【解决方案3】：

"jsx-a11y/label-has-associated-control": "off"

帮我解决了。

【讨论】：