属性编辑面板的更新有两种模式,一种是响应式的,这是默认的模式,即当你修改属性值的时候,立即更新属性,并根据值属性重新渲染webpart。第二种是非响应式的,如果指定非响应式模式,会在属性编辑面板下方自动添加一个Apply按钮,修改属性之后,需要点击这个按钮,才会修改属性值。
这个模式是通过disableReactivePropertyChanges这个属性控制的,默认返回值是false,也就是响应式:
protected get disableReactivePropertyChanges() {
return false;
}
返回false:响应式,即时更新属性值
返回true:非响应式,自动添加一个Apply按钮,点击按钮之后才更新属性值
响应式和非响应式所执行的事件是不同的,下面是属性编辑面板的事件执行顺序:
当打开属性编辑面板的时候执行下列三个事件
1. getPropertyPaneConfiguration: 读取属性面板的配置,返回值是IPropertyPaneConfiguration
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration;
2, onPropertyPaneRendered: 根据配置渲染属性面板,这个方法实际上会依次调用每一个getPropertyPaneConfiguration()方法返回的属性控件的onRender方法,来展示属性控件。
protected onPropertyPaneRendered(): void;
3, onPropertyPaneConfigurationStart: 属性面板渲染完成,可以编辑属性。这个事件除了会在打开属性编辑面板的时候执行之外,在切换webpart的时候,也会执行。
protected onPropertyPaneConfigurationStart(): void;
当修改某个属性之后:
4, onPropertyPaneFieldChanged: 在属性值更新后执行。包含三个参数:属性名(propertyPath), 旧的属性值(oldValue)和新的属性值(newValue)。
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void;
5, getPropertyPaneConfiguration: 再次获取属性配置。
6, onPropertyPaneRendered:再次渲染属性面板
如果是响应式,则会触发如下事件:
7, onPropertyPaneConfigurationComplete:修改属性之后,如果是响应式,会触发这个事件。标识配置完成。这个事件会在如下情形下触发:
- CONFIGURATION_COMPLETE_TIMEOUT超时,通常这个时间是上一次修改成功之后的5秒钟。
- CONFIGURATION_COMPLETE_TIMEOUT超时之前,用户点击‘X'关闭属性编辑面板.
- CONFIGURATION_COMPLETE_TIMEOUT超时之前,非相应式模式下,用户点击Apply按钮。.
- 用户切换webpart的时候,当前的webpart会触发
protected onPropertyPaneConfigurationComplete(): void;
如果是非响应式,则会触发下列事件:
7, onAfterPropertyPaneChangesApplied:用来保存属性
protected onAfterPropertyPaneChangesApplied(): void;
8, onPropertyPaneConfigurationComplete
9, onPropertyPaneRendered
当关闭属性编辑面板:
10,onPropertyPaneConfigurationComplete