如何配置SharePoint Framework web part （三）自定义一个属性控件

如果SharePoint Framework提供的开箱即用的属性控件无法满足需要怎么办？这个时候我们可以自定义一个属性控件来满足自己的需要。下面通过自定义一个带有标签的文本框作为例子，看一下如何自定义属性控件：

在webpart项目中创建一个文件夹以及四个文件如下：

首先我们定义这个属性控件的属性，就是在“getPropertyPaneConfiguration”添加属性控件时，需要指定的一些属性。

这个控件有一个label，需要用户指定label的文本（例如“New Field”），另外还需要绑定一个方法来处理textbox里文本的改变。

还有一个属性来表示是否禁用这个textbox。

创建文件"IPropertyPaneNewFieldProps.ts"，定义如下接口：

export interface IPropertyPaneNewFieldProps {
    label: string;
    onPropertyChange: (propertyPath: string, oldValue: any, newValue: any) => void;
    disabled?: boolean;
}

这里定义了三个属性，一个是label，就是这个文本框的标题，一个是onPropertyChange的方法，在文本更改的时候执行，最后一个是disabled，是否禁用这个文本框。

除了上面自定义的属性之外，每一个自定义的属性控件都需要继承“IPropertyPaneCustomFieldProps"这个接口，才可以在webpart中使用，这个接口定义了例如key，onRender等必须实现的成员。

为了同时使用自定义接口和webpart规定的接口，我们创建文件”IPropertyPaneNewFieldInternalProps.ts"，定义如下接口：

import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-webpart-base";
i