ES皮棉警告表单标签，不确定如何解决

Question

我为某些表单输入提供了一些标签，这些标签试图为它们提供for属性，但是esLint仍在警告我，因此不确定我在做什么错。

我正在使用此复选框样式，这就是为什么我以这种方式格式化jsx的原因。 https://lokesh-coder.github.io/pretty-checkbox/

任何帮助都将非常感谢

这是陪同的错误 A form label must be associated with a control

这是到目前为止的代码

<CheckBoxes>
  <label for="weightLoss">
    <h4>Weight Loss</h4>
    <div className="pretty p-smooth p-curve p-fill">
      <input
        type="checkbox"
        name="weightLoss"
        reason="Weight Loss"
        checked={formState.reasons.weightLoss}
        onChange={onChange}
      />
      <div className="state p-primary">
        <label for="weightLoss"></label>
      </div>
    </div>
  </label>
  <label for="strength">
    <h4>Strength</h4>
    <div className="pretty p-smooth p-curve p-fill">
      <input
        type="checkbox"
        name="strength"
        reason="Strength"
        checked={formState.reasons.strength}
        onChange={onChange}
      />
      <div className="state p-primary">
        <label for="strength"></label>
      </div>
    </div>
  </label>
  <label for="sport">
    <h4>Sport</h4>
    <div className="pretty p-smooth p-curve p-fill">
      <input
        type="checkbox"
        name="sport"
        reason="Sport"
        checked={formState.reasons.sport}
        onChange={onChange}
      />
      <div className="state p-primary">
        <label for="sport"></label>
      </div>
    </div>
  </label>
  <label for="other">
    <h4>Other</h4>
    <div className="pretty p-smooth p-curve p-fill">
      <input
        type="checkbox"
        name="other"
        reason="Other"
        checked={formState.reasons.other}
        onChange={onChange}
      />
      <div className="state p-primary">
        <label for="other"></label>
      </div>
    </div>
  </label>
</CheckBoxes>