标签必须有相关的控件

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

现在，错误说

一个表单标签必须与一个控件关联

有什么建议吗？

Answer 1

把输入放在标签里

要将一个标签与另一个控件隐式关联起来，可以使用 控制元素必须在LABEL元素的内容内。.

来源：W3.org，HTML文档中的表单--17.9标签。W3.org，HTML文档中的表单--17.9标签。