0

我有一个 Sharepoint 应用程序。通过单击命令列表按钮，我打开了一个面板。

但是，当我尝试关闭面板时，我收到一条错误消息，指出我的 _renderPanelComponent 函数不是函数，而当我尝试从 _dismissPanel() 记录它时，我发现它是未定义的。但我可以从 _showPanel() 调用它。

通过从 _dismissPanel() 登录，我现在在单击关闭并触发 _onCancel() 后返回此处，但我不确定为什么我的 _renderPanelComponent 未定义，这就是我的问题。

这就是代码的样子

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseListViewCommandSet,
  Command,
  IListViewCommandSetListViewUpdatedParameters,
  IListViewCommandSetExecuteEventParameters
} from '@microsoft/sp-listview-extensibility';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { assign } from '@uifabric/utilities';
import MainPanel, { IMainPanelProps } from '../MainPanel';

export interface ICreditInfoCommandSetProperties {
  sampleTextOne: string;
  sampleTextTwo: string;
  context:object;
}

export default class CreditInfoCommandSet extends BaseListViewCommandSet<ICreditInfoCommandSetProperties> {

  private panelPlaceHolder: HTMLDivElement = null;

  public _renderPanelComponent(props: any) {
    const element: React.ReactElement<IMainPanelProps> = React.createElement(MainPanel, assign({
      isOpen: false,
      onClose: null,
      context: this.context
    }, props));
    ReactDom.render(element, this.panelPlaceHolder);
  }
  
  private _showPanel() {
    this._renderPanelComponent({
      isOpen: true,
      onClose: this._dismissPanel,
      context: this.context
    });
  }
  
  private _dismissPanel() {
    console.log(typeof(this._renderPanelComponent))
    this._renderPanelComponent({ isOpen: false});
  }

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized CreditInfoCommandSet');
    this.panelPlaceHolder = document.body.appendChild(document.createElement("div"));
    return Promise.resolve();
  }

  @override
  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
    
  }

  @override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_2':
        this._showPanel();
        break;
      default:
        throw new Error('Unknown command');
    }
  }
}

这就是我的面板的样子

import * as React from 'react';
// Custom imports
import { Panel, PanelType , TextField, Checkbox, DefaultButton, PrimaryButton, Dropdown, IDropdownOption} from 'office-ui-fabric-react';
import style from "./MainPanelStyle.module.scss";

export interface IMainPanelProps {
    onClose: () => void;
    isOpen: boolean;
}

export interface IMainPanelState {}

export default class MainPanel extends React.Component<IMainPanelProps, IMainPanelState> {

    constructor(props: IMainPanelProps, state: IMainPanelState) {
        super(props);

        this.state = {}

private _onCancel = () => {
        this.props.onClose();
}


public render(): React.ReactElement<IMainPanelProps> {
        return (
            <div>

                <Panel isLightDismiss={true} isOpen={this.props.isOpen} type={PanelType.medium} onDismiss={this.props.onClose}>

 <DefaultButton className={style.closeButton} text="Close" onClick={this._onCancel}/>

                 </Panel>
                  </div>
         );
     }
    }
4

1 回答 1

0

我也遇到了这个。改变这个

private _dismissPanel() {

至

private _dismissPanel = () =>{

这对我有用，因为它将方法绑定到其类的范围，因此this可以正确解决。我意识到这是一篇旧帖子，但以防万一其他人遇到这个问题。

于 2021-10-27T21:28:10.673 回答