点击一个div时，如何触发另一个元素的点击事件？

Question

现在我有一个div，基本上是一个巨大的正方形，在这个div里面，我有另一个div，里面只有一个显示“上传文件”的文本和一个隐藏的input type = file元素。当用户按下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。一旦用户在 id="test" 的 div 中的任何位置单击，我想触发文件上传元素的点击。我该如何在 React 中实现呢？

我认为它可能会像这样，但我不确定语法和结构应该如何设置：

_handleClick: function() {
  //trigger click into img1
}

- ogk

---

听起来 react-dropzone 可以帮助你，它在 https://github.com/paramaggarwal/react-dropzone 上。 - Jan Klimo

@JanKlimo我目前在使用Dropzone时遇到了警告“Warning: Failed propType: Invalid prop children supplied to Dropzone”，您有任何解决方法吗？ - ogk

Answer 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">
                           +添加照片 1
                       </div>
                   </div>
        }
    })

了解更多关于refs的内容请参阅此处：https://facebook.github.io/react/docs/more-about-refs.html

- Rishav Rastogi

---

有没有办法在组件之间使用它们？ - Capuchin

@未来的读者：如果你正在使用event.preventDefault()（就像我一样），这不会起作用。移除它，这个解决方案就可以正常工作了。 - Rahul Desai