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时，必须将其绑定到正确的上下文（this）。例如。绑定它或使用箭头功能。

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

ref使得元素在反应中得到null

1 个答案: