标签必须有关联的控件答案

【问题标题】：Label must have associated control标签必须有关联的控件
【发布时间】：2020-06-10 14:47:43
【问题描述】：

有一个 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 说这是一个未知属性。

现在，错误提示：

表单标签必须与控件相关联

有什么建议吗？

【问题讨论】：

标签： javascript html reactjs input label

【解决方案1】：

将输入放在标签内。

要将标签与另一个控件隐式关联，控件元素必须在 LABEL 元素的内容中。

来源：W3.org, Forms in HTML document - 17.9 Labels

【讨论】：