javascript - ref 获取元素在 react 中为空

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为空(不是引用)。当您将事件处理程序传递给 props 时，您必须将其绑定(bind)到正确的上下文 (this)。例如。绑定(bind)它或使用箭头功能。

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