Reactjs SharePoint Framework creatRef对象未定义

我是一个反应和SharePoint框架的新手，我希望有人能帮助我解决与此帖子相同的问题-->。基本上，我正在创建一个需要将文件上载到文档库的Web部件。office ui fabric react button控件没有内置此功能，但HTMLInputElement具有此功能。上面链接中Je-T的解决方案描述了如何使用UI结构按钮将事件传递给已为HTMLInput元素创建的引用。对我来说是有道理的，但在实践中它对我不起作用。基本上，fileUploadRef引用在ClickUpload方法中始终是未定义的。谁能帮我理解下面的错误代码。如果您有一个类似的工作示例，那么这也会有所帮助

import * as React from "react";
import { IPhotoUploaderProps } from "./IPhotoUploaderProps";
import styles from "./PhotoUploader.module.scss";
import { createRef, IButtonStyles, IconButton, HighContrastSelector, Label, IContextualMenuProps, IIconProps, PrimaryButton, IButtonProps } from 'office-ui-fabric-react';
import Dropzone from 'react-dropzone';
import { Modal, ILayerProps} from 'office-ui-fabric-react';


export class PhotoUploader extends React.Component<IPhotoUploaderProps> {
    constructor(props: IPhotoUploaderProps) {
        super(props);


    }

    private fileUploadRef = createRef<HTMLInputElement>();

    private onDrop = (acceptedFiles) => {
        console.log(acceptedFiles);

    }

    private layerProps: ILayerProps = {eventBubblingEnabled: true};

    private clickUpload() {
        if (this.fileUploadRef.current) {
            this.fileUploadRef.current.click();
        }
    }

    private uploadFile(clickEvent: EventInit) {

    }


    public render(): React.ReactElement<IPhotoUploaderProps> {
        const cancelIcon: IIconProps = { iconName: 'Cancel'};

        return (
            <Modal isOpen={this.props.showModal} onDismiss={this.props.modalCancel}  layerProps={this.layerProps} >  
            <div className={styles.photoUploaderContainer}>
                 <IconButton 
                      iconProps={cancelIcon}
                      onClick={this.props.modalCancel}
                      className={styles.cancelButton}
                 />
                <div className={styles.heading}>Submit a Photo</div>
                <p>
                    You can submit home page banner photos to be seen by <strong>all users company-wide.</strong> All photos are reviewed before
                    use.  If your photo is chosen, your name will appears in the attribution on the home page.
                </p>
                <p>
                    <strong>Do not submit photos you don't want the whole company to see!</strong>
                </p>

               <PrimaryButton onClick={this.clickUpload} title="Upload File">Upload Image</PrimaryButton>
               <input ref={this.fileUploadRef} type="file" accept="application/xml" onChange={this.uploadFile}  />

            </div>
           </Modal>
        );
    }
}

import*as React from“React”；
从“/IPhotoUploaderProps”导入{IPhotoUploaderProps}；
从“/PhotoUploader.module.scss”导入样式；
从“office ui fabric react”导入{createRef、IButtonStyles、iOnButton、HighControlSelector、Label、iContextalMenuProps、iConProps、PrimaryButton、IButtonProps}；
从“react Dropzone”导入Dropzone；
从“office ui fabric react”导入{Modal，ILayerProps}；
导出类PhotoUploader扩展React.Component{
构造器（道具：IPhotoUploaderProps）{
超级（道具）；
}
private fileUploadRef=createRef（）；
private onDrop=（acceptedFiles）=>{
console.log（acceptedFiles）；
}
私有层操作：ILayerProps={eventBubblingEnabled:true}；
私有clickUpload（）{
if（this.fileUploadRef.current）{
this.fileUploadRef.current.click（）；
}
}
私有上传文件（clickEvent:EventInit）{
}
public render（）：React.ReactElement{
const cancelIcon:IIconProps={iconName:'Cancel'}；
返回(
提交照片

您可以提交主页横幅照片，供公司范围内的所有用户查看。所有照片都会在查看之前进行审阅
使用。如果选择了您的照片，您的姓名将显示在主页的属性中。


不要提交不希望整个公司看到的照片！

上传图像
);
}
}

看起来您只需要绑定

这个。在构造函数中单击Upload（）

从：

在JSX回调中，您必须小心

这个

的含义。在里面 默认情况下，类方法不受绑定。如果你忘了

bind

此。handleClick

并将其传递给

onClick

，这将是

未定义的

当函数实际被调用时