单击另一个div时触发对另一个元素的单击

Question

现在，我有一个div，它基本上是一个巨大的正方形，在div内，我还有另一个div，它是简单的文本，上面写着“ Upload
File”，同时还有一个隐藏的input type = file元素。当用户按下div时，我要触发文件上传元素。到目前为止，我想出的代码是：

<div id="test" onClick={this._handleClick}>
   <input type="file" name="image1" accept=".jpg,.jpeg,.png" id="img1" />
   <div id="uploadPhotoButtonText">
       +Add Photo 1
   </div>
</div>

因此，我在CSS中将文件输入元素设置为display: none。一旦他们在div id =“
test”中的任意位置单击，我想触发对文件上传元素的单击。我该怎么做呢？

我以为会是这样，但我不确定语法以及如何进行结构化：

_handleClick: function() {
  //trigger click into img1
}

Answer 1

您可以使用“引用”来引用组件内的节点并触发它们上的内容。

FileBox = React.createClass({
        _handleClick: function(e) {
            var inputField = this.refs.fileField;
            inputField.click()
        },
        render: function() {
            return <div id="test" onClick={this._handleClick}>
                       <input ref="fileField" type="file" name="image1" accept=".jpg,.jpeg,.png" id="img1" />
                       <div id="uploadPhotoButtonText">
                           +Add Photo 1
                       </div>
                   </div>
        }
    })

在此处阅读有关裁判的更多信息：https : //facebook.github.io/react/docs/more-about-
refs.html