SharePoint Framework объект creatRef не определен - PullRequest
Новая
       30

SharePoint Framework объект creatRef не определен

0 голосов
/ 22 января 2020

Я новичок ie в React и инфраструктуре SharePoint, и я надеюсь, что кто-то может помочь мне с той же проблемой, что и эта публикация -> https://github.com/OfficeDev/office-ui-fabric-react/issues/4733. По сути, я создаю веб-часть, которая должна загрузить файл в библиотеку документов. Элемент управления office-ui-fabri c -react не имеет этой встроенной функции, но имеет HTMLInputElement. Решение Je-T в приведенной выше ссылке описывает использование пользовательского интерфейса fabri c для передачи события в ссылку, созданную для элемента 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>
        );
    }
}

1 Ответ

0 голосов
/ 23 января 2020

Похоже, вам просто нужно связать this.clickUpload() в конструкторе.

Из документов React :

Вы должны быть осторожны со значением this в обратных вызовах JSX. В JavaScript методы класса не связаны по умолчанию. Если вы забудете bind this.handleClick и передадите его onClick, при вызове функции это будет undefined.

...