（五）在webpart中实现SharePoint Online的增删查改（CRUD）操作

        在上一篇博客（四）修改webpart并在SharePoint Online中调试中，我们在SharePoint Online在线工作台中使用”this.context.pageContext.web.title“获取到了当前站点的名称，下面将介绍如何实现增删查改操作。微软提供了一个library pnp-js-core，封装了REST API，可以使用这个库来与SharePoint Online交互。

        首先打开powershell进入webpart项目目录，使用如下npm命令安装pnp-js-core库。 

npm i --save @pnp/sp @pnp/common @pnp/odata @pnp/logging

        安装完成之后可以在项目的node_modules中看到新添加的库文件如下：

        添加完成之后，我们需要在webpart中实现以下四个操作：

• 读取当前站点下的列表
• 在指定列表中创建一个item
• 修改item
• 删除item

        使用Code打开项目，在HelloWorldWebPart.ts文件的import代码区域添加如下代码，引入一个对象：sp

        sp对象是对SharePoint REST API的封装，我们需要使用sp对象与SharePoint Online交互。接下来我们参照上一篇博客内容在webpart的属性编辑器中添加一个名字为“列表名称”的文本框，用于指定需要访问的列表。还是需要三步，第一步确保import中导入一个文本框控件：

        第二步在接口中定义列表名称属性：

        第三步修改getPropertyPaneConfiguration()方法在webpart属性编辑器中显示这个文本框控件：

        然后添加如下get函数，禁用响应式的属性编辑功能：

        disableReactivePropertyChanges是webpart基类BaseClientSideWebPart的一个属性，默认是false，也就是使用响应式方式，当用户修改webpart属性编辑器中的webpart属性的时候，webpart会即时根据属性的值来展示webpart，上一篇博客中我们为webpart添加了一个背景颜色的属性，当选择下拉菜单中的颜色的时候，webpart的背景颜色会立即改变。现在将这个属性值设置为true，webpart属性编辑器会自动添加一个“应用”的按钮，对webpart属性所做的修改，不会立即改变webpart，而是要点击这个按钮，才会改变webpart。

        添加了列表名称这个属性之后，webpart的属性编辑器是这样子的，注意下方自动添加了一个“应用”按钮：

        添加了这个webpart属性之后，让我们添加CRUD操作需要的UI，也就是修改render()方法，