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

你可以使用＆＃34; refs＆＃34;引用组件内的节点并触发它们上的内容。


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

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

1 个答案: