React Fabric Ui 面板无法关闭

问题描述

我有一个 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>
         );
     }
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

office-ui-fabric-react reactjs reactjs reactjs reactjs