单击另一个 div 时触发对不同元素的单击答案

【问题标题】：Trigger a click on a different element when clicking an other div单击另一个 div 时触发对不同元素的单击
【发布时间】：2016-04-06 08:21:33
【问题描述】：

现在我有一个基本上是一个巨大正方形的 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
}

【问题讨论】：

听起来react-dropzone 可以帮助您处理github.com/paramaggarwal/react-dropzone
@JanKlimo 我目前收到此警告Warning: Failed propType: Invalid prop children supplied to Dropzone，当我尝试使用它时，您知道我该如何解决这个问题吗？

标签： javascript css reactjs

【解决方案1】：

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


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

【讨论】：

有什么方法可以跨组件使用它们？
@Future 读者：如果你正在做event.preventDefault()（就像我一样），这将行不通。删除它，这个解决方案就可以正常工作了。