Как этот код связывает кнопку «Отправить» с функцией и как сделать еще одну кнопку?

Два вопроса: я изучаю spfx, и для этого конкретного примера я не понимаю, как кнопка «Отправить» связана с функцией setComment(). Я создал кнопку «Обновить», которую хочу использовать для обновления только что созданного элемента. Это ничего не делает, хотя я передал ему реквизит (возможно, неправильно!)

Для кнопки «Обновить» я пытался использовать React для передачи реквизита с помощью onClick в JSX, но это не работает. Я также пытался сделать это без $. Я создал отдельный набор функций _readListItem() и _getListItem(), чтобы помочь мне, но не уверен, как их использовать в сочетании с _updateListItem(), и нужны ли они мне вообще.

import { Environment, EnvironmentType, Version } from '@microsoft/sp-core-library';
import { ISPHttpClientOptions, SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { escape } from '@microsoft/sp-lodash-subset';
import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-webpart-base';
import * as strings from 'FeedbackWebpartWebPartStrings';
import styles from './FeedbackWebpart.module.scss';
import { IFeedbackWebPartProps } from './IFeedbackWebPartProps';
import {ISPListItem} from './ISPListItem';

export default class FeedbackWebpartWebPart extends BaseClientSideWebPart<IFeedbackWebPartProps> {

  public render(): void {
    this._updateListItem = this._updateListItem.bind(this);
    this._readListItem = this._readListItem.bind(this);
    this.domElement.innerHTML = `
    <div>
    <p class='${styles.titleText}'>Job Evaluation Form</p>
    <i class='ms-Icon ms-Icon--NoteForward' aria-hidden='true'></i>
    <p class='${styles.labelText}'>Name</p>
    <input type='text' class='${styles.input}' maxlength='255' placeholder='${escape(this.properties.hintText)}' />
    <br>
    <br>
    <p class='${styles.labelText}'>Job Title</p>
    <input type='text' class='${styles.input}' maxlength='255' placeholder='${escape(this.properties.hintText)}' />
    <br>
    <p class='${styles.successIndicator}'></p>
    <br>
    <br>
    <br>
    <button type='button' class='ms-Button'><span class='ms-Button-label'>Send</span></button>
    <br>
    <br>
    <button type='button' class='ms-Button' onClick='${this._updateListItem}'><span class='ms-Button-label'>Update</span></button>
    </div>`;

 //The binding below allows setComment to be used in the render and outside of it.
    this.setComment = this.setComment.bind(this);
    this._updateListItem = this._updateListItem.bind(this);
    this._readListItem = this._readListItem.bind(this);
    //Grab ALL the <input> elements
    // [0] -  just want the first element
    // cast this generic element to specific type of element (which I know that it is) as the variable is expecting a specific type
    const textInput: HTMLInputElement = this.domElement.getElementsByTagName("INPUT") [0] as HTMLInputElement;

    // setComment is used in an event listener here to be called upon whenever a user types into this input field.
    textInput.addEventListener("keyup", this.setComment);
    this.sendFeedback = this.sendFeedback.bind(this);
    const submitbutton: HTMLButtonElement = this.domElement.getElementsByTagName("BUTTON") [0] as HTMLButtonElement;

    submitbutton.onclick = this.sendFeedback;
    submitbutton.disabled = true;

  }
private _updateListItem(): void {

  const url: string = this.context.pageContext.site.absoluteUrl+"/_api/web/lists/getbytitle('Feedback')/items(1)";
  const itemDefinition : any = {
    "Title" : "Modified title field value!"};
    const headers:any = {
      "X-HTTP-Method":"MERGE",
      "IF-MATCH": "*",
    };
    const spHttpClientOptions: ISPHttpClientOptions = {
      "headers": headers,
      "body": JSON.stringify(itemDefinition)
    };
    this.context.spHttpClient.post(url, SPHttpClient.configurations.v1,spHttpClientOptions)
    .then((response: SPHttpClientResponse) => {
      if (response.status === 204) {
        this._operationResults.innerHTML = "Update: List Item updated successfully.";

      } else {
        this._operationResults.innerHTML = "Update: List Item update failed. " +response.status+" - "+response.statusText;
      }
    });
    }

private sendFeedback(): void {
  this.context.statusRenderer.clearError(this.domElement);
  const paragraphElement: HTMLParagraphElement = this.domElement.getElementsByClassName(styles.successIndicator) [0] as HTMLParagraphElement;
  paragraphElement.innerHTML = "";

  if (this._commentText === undefined || this._commentText.length === 0) {
    this.context.statusRenderer.renderError(this.domElement, "Please type in a comment or a suggestion.");
    return;

  }
  if (Environment.type === EnvironmentType.Local) {
    this.context.statusRenderer.renderError(this.domElement, "Feedback can't be saved when running in local workbench");
    return;
  }

  const url: string = this.context.pageContext.site.absoluteUrl+"/_api/web/lists/getbytitle('Feedback')/items";
  const item : any = {
    "Title": this._commentText,
    "URL": window.location.href,
    "JobTitle": this._jobTitle
  };

  const spHttpClientOptions: ISPHttpClientOptions = {
    "body": JSON.stringify(item)
  };

Извините, что много кода, но я не знаю, как вы поймете, что мне нужно знать, если я его не предоставлю.

Я ожидаю понять, как работает кнопка «Отправить» и кнопка «Обновить», чтобы обновлять элемент любых изменений при нажатии.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, что событие onClick кнопки «Отправить» задается следующим кодом:

const submitbutton: HTMLButtonElement = this.domElement.getElementsByTagName("BUTTON") [0] as HTMLButtonElement;

submitbutton.onclick = this.sendFeedback;

Здесь getElementsByTagName("BUTTON")[0] возвращает первый элемент, созданный с помощью приведенного выше HTML.

Я предполагаю, что при таком же подходе кнопка обновления может быть обработана так:

const updateButton: HTMLButtonElement = this.domElement.getElementsByTagName("BUTTON") [1] as HTMLButtonElement;

updateButton.onclick = this._updateListItem.bind(this);

Обратите внимание на измененный индекс с [0] на [1], чтобы взять вторую кнопку, а также на использование bind(). Без привязки «это» было бы неопределенным при вызове _updateListItem.

Спасибо. Кнопка «Обновить» по-прежнему ничего не делает. Это потому, что ему нужен собственный обработчик событий, или я могу просто использовать setComment(event: Event)?

NightTom 15.07.2019 17:01

Я получаю сообщение TypeError: невозможно установить для свойства 'innerHTML' значение null при нажатии кнопки "Обновить".

NightTom 15.07.2019 17:14

Другие вопросы по теме