现在我有一个 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" 中的任何地方，我想触发点击文件上传元素。我怎么能在react中做到这一切？
我认为它会是这样的，但我不确定语法以及如何构建它：
_handleClick: function() {
//trigger click into img1
}
您可以使用“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>
}
})
在此处阅读有关 refs 的更多信息：https : //facebook.github.io/react/docs/more-about-refs.html