单击其他div时触发单击其他元素

Question

现在我有一个div基本上是一个巨大的正方形,在div里面我有另一个div,它只是文本,上面写着"上传文件"和隐藏的输入类型=文件元素.当用户按下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