SharePoint 框架 creatRef 对象未定义答案

【问题标题】：SharePoint Framework creatRef object undefinedSharePoint 框架 creatRef 对象未定义
【发布时间】：2020-05-09 01:50:45
【问题描述】：

我是 React 和 SharePoint 框架的新手，我希望有人可以帮助我解决与本文相同的问题 --> https://github.com/OfficeDev/office-ui-fabric-react/issues/4733。基本上我正在创建一个需要将文件上传到文档库的 webpart。 office-ui-fabric-react 按钮控件没有内置此功能，但 HTMLInputElement 有。 Je-T 在上述链接中的解决方案描述了使用 UI 结构按钮将事件传递给已为 HTMLInput 元素创建的引用。对我来说很有意义，但在实践中对我不起作用。基本上，在 ClickUpload 方法中，fileUploadRef 引用始终未定义。谁能帮我理解以下代码的错误。如果您有类似的工作示例，那也会有所帮助。

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>
        );
    }
}

【问题讨论】：

标签： reactjs web-parts spfx office-ui-fabric

【解决方案1】：

看起来你只需要在构造函数中绑定this.clickUpload()。

来自React docs：

你必须小心 this 在 JSX 回调中的含义。在 JavaScript，类方法默认不绑定。如果你忘记 bind this.handleClick 并将其传递给onClick，这将是undefined 当函数被实际调用时。

【讨论】：