ref反应中得到空元素

Question

不知道我是否正确使用了ref，基本上我想在用户点击其他元素时触发另一个元素。但我得到了错误Cannot read property 'photoUploadDropAreaElement' of null

triggerUploadDialog(){ 
     this.photoUploadDropAreaElement.click(); 
    } 

render() { 
    return(
      <div onClick={this.triggerUploadDialog} className="PhotoUploadWrap"> 
       <PhotoUpload ref={dropArea => this.photoUploadDropAreaElement = dropArea} /> 
      </div> 
    ); 

最初加载页面时没有语法错误。怎么了？

Answer 1

您所描述的错误实际上表示this为空（不是参考）。将事件处理程序传递给道具时，必须将其绑定到正确的上下文（this）。例如。绑定它或使用箭头功能。

<div onClick={this.triggerUploadDialog.bind(this)} className="PhotoUploadWrap">