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">