javascript - 标签必须有关联的控件

Question

有一个 div，里面有一些元素，我想为其添加一个标签。

这是原文:

<div className="upload-image">                   
  <input
    name="image"
    id="image-input"
    accept="image/*"
    onChange={this.doSomething}
    multiple
    type="file"
    className="myClass"
  />
  <span className="upload-image-label">
    <Icon name="image outline" />
    drop the image here
  </span>
</div>

添加标签后:

<div className="upload-image">
    <label htmlFor="image-input">Add image</label> //this line is added
        <input
           name="image"
           id="image-input"
           accept="image/*"
           onChange={this.doSomething}
           multiple
           type="file"
           className="myClass"
         />
        <span className="upload-image-label">
            <Icon name="image outline" />
             drop the image here
       </span>
</div>

最初它是 for 而不是 htmlFor 但 React 说这是一个未知属性。

现在，错误显示:

A form label must be associated with a control

有什么建议吗？

Answer 1

我知道这个问题不久前已经被问过。我仍然面临这个错误消息。我想我分享了能够解决我的问题的结果。

确保标签具有 htmlFor。您提到的标签的 htmlFor 应该是输入字段的 id。将输入字段包裹在标签的开始和结束标记内。

标签和输入字段代码应如下所示:

<label className="list-group-item" htmlFor="first-checkbox">
  <input
    className="form-check-input me-1"
    type="checkbox"
    value=""
    id="first-checkbox"
  />
  First checkbox
</label>;