在SPFx中使用图形API在sharepoint中创建列表项

import { Version, DisplayMode } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './CreateListItemWebPart.module.scss';
import * as strings from 'CreateListItemWebPartStrings';

export default class CreateListItemWebPart extends BaseClientSideWebPart<{}> {

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${styles.createListItem}">
        <div class="${styles.container}">
          <div class="${styles.row}">
            <div class="${styles.column}">
              <span class="${styles.title}">${escape(strings.CreateListItem)}</span>
              <p class="${styles.subTitle}">${escape(strings.CreateDescription)}</p>
              <input type="text" id="titleInput" placeholder="${escape(strings.TitlePlaceholder)}"/>
              <button id="createButton">${escape(strings.CreateButton)}</button>
            </div>
          </div>
        </div>
      </div>`;
    this._renderListItems();
  }

  private _renderListItems(): void {
    const button: HTMLButtonElement = this.domElement.querySelector('#createButton');
    button.addEventListener('click', () => {
      const title: string = (this.domElement.querySelector('#titleInput') as HTMLInputElement).value;
      this._createListItem(title);
    });
  }

  private _createListItem(title: string): Promise<void> {
    const clientContext = new SP.ClientContext.get_current();
    const oList = clientContext.get_web().get_lists().getByTitle('YourListTitle');

    const itemCreateInfo = new SP.ListItemCreationInformation();
    const oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', title);
    oListItem.update();

    return clientContext.executeQueryPromise().then(() => {
      console.log('Item created: ' + title);
    }).catch((error) => {
      console.error('Error creating item: ', error);
    });
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: []
            }
          ]
        }
      ]
    };
  }
}