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

现在，错误说：

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

有什么建议么？

Answer 1

将输入放在标签内。

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

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