从没有框架的文本框更新 Sharepoint 在线列表列

Question

当此代码到达此屏幕截图底部的 createItem 方法时，FirstName 变量为空或 null。我怎样才能让它接受我在 txtFirstName 文本框中输入的内容？我正在尝试在不使用框架的情况下从文本框更新 Sharepoint 在线列表列。

public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.financeSysAcc }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Finance System Access Request Form</span>

              <table style="width:100%;">
                <tr>
                    <td>First Name:</td>
                    <td><input name="txtFirstName" type="text" /></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input id="txtLastName" type="text" /></td>
                </tr>
                <!--<tr>
                  <td>Submit:<td>
                  <td><input id="Submit1" type="submit" value="Insert" onclick="_addBooking('AlistairTest');"/></td>
                </tr>-->
              </table>

              <p class="${ styles.description }">Name: ${escape(this.properties.listName)}</p>  

              <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
                <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
                  <button class="${styles.button} create-Button">  
                    <span class="${styles.label}">Create item</span>  
                  </button>  
                  <button class="${styles.button} read-Button">  
                    <span class="${styles.label}">Read item</span>  
                  </button>  
                </div>  
              </div>  

              <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
                <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
                  <button class="${styles.button} update-Button">  
                    <span class="${styles.label}">Update item</span>  
                  </button>  
                  <button class="${styles.button} delete-Button">  
                    <span class="${styles.label}">Delete item</span>  
                  </button>  
                </div>  
              </div>  

              <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
                <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
                  <div class="status"></div>  
                  <ul class="items"><ul>  
                </div>  
              </div>  

            </div>  
          </div>  
        </div>
      </div>

      `;
      this.setButtonsEventHandlers(); 
  }
  private setButtonsEventHandlers(): void {  
    const webPart: FinanceSysAccWebPart = this;  
    this.domElement.querySelector('button.create-Button').addEventListener('click', () => { webPart.createItem(document.getElementById('txtFirstName').textContent); });  
    this.domElement.querySelector('button.read-Button').addEventListener('click', () => { webPart.readItem(); });  
    this.domElement.querySelector('button.update-Button').addEventListener('click', () => { webPart.updateItem(); });  
    this.domElement.querySelector('button.delete-Button').addEventListener('click', () => { webPart.deleteItem(); });  
  }  
private createItem(FirstName: string): void {
    //const FirstName:string=this.domElement.getElementsByClassName('FirstName');
    //const FirstName:string=document.getElementsByName('txtFirstName').item(0).textContent;
    const body: string = JSON.stringify({
      //'ID':`this.getLatestItemId`,
      'Title': `Item ${new Date()}`,
      'FirstName': FirstName
    });

    this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.properties.listName}')/items`,
    SPHttpClient.configurations.v1,
    {
      headers: {
        'Accept': 'application/json;odata=nometadata',
        'Content-type': 'application/json;odata=nometadata',
        'odata-version': ''
      },
      body: body
    })
    .then((response: SPHttpClientResponse): Promise<IListItem> => {
      return response.json();
    })
    .then((item: IListItem): void => {
      this.updateStatus(`Item '${item.Title}' (ID: ${item.Id}) successfully created`);
    }, (error: any): void => {
      this.updateStatus('Error while creating the item: ' + error);
    });
  }

我做错了什么？

Answer 1

使用PnpJS库，你可以轻松实现。

示例演示：

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

import styles from './SpFxPureWebPart.module.scss';
import * as strings from 'SpFxPureWebPartStrings';

import { sp } from "@pnp/sp";

export interface ISpFxPureWebPartProps {
  description: string;
}

export default class SpFxPureWebPart extends BaseClientSideWebPart<ISpFxPureWebPartProps> {

  public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.spFxPure }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
            <table style="width:100%;">
                <tr>
                    <td>First Name:</td>
                    <td><input id="txtFirstName" type="text" /></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input id="txtLastName" type="text" /></td>
                </tr>               
            <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
                <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
                  <button class="${styles.button} update-Button">  
                    <span class="${styles.label}">Update item</span>  
                  </button>                    
                </div>  
              </div> 
          </div>
        </div>
      </div>`;
      this.setButtonsEventHandlers(); 
  }

  private setButtonsEventHandlers(): void {      
    this.domElement.querySelector('button.update-Button').addEventListener('click', () => { this.updateItem(); });  
  } 

  private updateItem():void{
    let txtFirstName=(<HTMLInputElement>document.getElementById("txtFirstName")).value;
    let txtLastName=(<HTMLInputElement>document.getElementById("txtLastName")).value;
    let list = sp.web.lists.getByTitle("testlist");
    list.items.getById(1).update({
        FirstName: txtFirstName,
        LastName: txtLastName
    }).then(i => {
        console.log(i);
    });
  }
  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

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

从没有框架的文本框更新 Sharepoint 在线列表列

Update Sharepoint online list column from textbox with no Framework

html

javascript

sharepoint-online