在单击其他div时触发对其他元素的点击 [英] Trigger a click on a different element when clicking an other div

问题描述

现在我有一个div基本上是一个巨大的方块，在div里面，我有另一个div，只是文本，说上传文件和一个隐藏的输入类型=文件元素。当用户按div时，我想触发文件上传元素。我到现在为止的代码是：

 < div id =testonClick = {this._handleClick }> 
< input type =filename =image1accept =。jpg，.jpeg，.pngid =img1/> 
< div id =uploadPhotoButtonText> 
 +添加照片1 
< / div> 
< / div> 
  

因此，在CSS中设置的文件输入元素为 display：none 。一旦他们点击div id =test的任何地方，我就要触发点击进入文件上传元素。我如何做所有这些在反应？

我认为这将是这样的东西，但我不知道的语法和如何去构建它：

  _handleClick：function（）{
 //触发点击进入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 =fileFieldtype =filename =image1accept =。jpg，.jpeg，.pngid =img1/ > 
< div id =uploadPhotoButtonText> 
 +添加照片1 
< / div> 
< / div> 
} $ b b}）
 
  
 
阅读更多关于refs的信息： https://facebook.github.io/react/docs/more-about-refs.html  
 
Right now I have a div that is basically a giant square and inside the div I have another div that is simply text that says "Upload File" and a hidden input type = file element as well. When the user presses the div I want to trigger the file upload element. The code I have come up with up until now is:
<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>
So the file input element I set in CSS as display: none. And once they click anywhere in the div id="test" I want to trigger a click into the file upload element. How can I do all this in react?

I'm thinking it would be something like this but I'm not sure about the syntax and how to go about structuring it:
_handleClick: function() {
  //trigger click into img1
}

解决方案
You can use "refs" to refer to nodes inside a component and trigger things on them. 

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>
        }
    })


Read more about refs here: https://facebook.github.io/react/docs/more-about-refs.html

                        
这篇关于在单击其他div时触发对其他元素的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！