如何解决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 举报,一经查实,本站将立刻删除。