Reactjs 此代码如何将发送按钮与函数关联，以及如何制作另一个按钮？

两个问题：我正在研究spfx，对于这个特定的示例，我不理解Send按钮如何与setComment（）函数相关联。我已经创建了一个更新按钮，我想用它来更新我刚刚创建的项目。即使我已经将道具传递给它，它也不会起任何作用（可能是错误的！）

对于更新按钮，我尝试使用React在JSX中使用onClick传递道具，但这不起作用。我也尝试过在没有美元的情况下这样做。我创建了一组单独的函数_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)
  };

从'@microsoft/sp core library'导入{Environment，EnvironmentType，Version}；
从“@microsoft/sp http”导入{ISPHttpClientOptions，SPHttpClient，SPHttpClient响应}；
从'@microsoft/sp lodash subset'导入{escape}；
从'@microsoft/sp webpart base'导入{BaseClientSideWebPart，IPropertyPaneConfiguration，PropertyPaneTextField}；
从“FeedbackWebPartWebPartString”导入*作为字符串；
从“./FeedbackWebpart.module.scss”导入样式；
从“./IFeedbackWebPartProps”导入{IFeedbackWebPartProps}；
从“./ISPListItem”导入{ISPListItem}；
导出默认类FeedbackWebpartWebPart扩展BaseClientSideWebPart{
公共呈现（）：void{
this.\u updateListItem=this.\u updateListItem.bind（this）；
this.\u readListItem=this.\u readListItem.bind（this）；
this.doElement.innerHTML=`
职务评估表
名称




职务









邮寄




使现代化
`;
//下面的绑定允许在渲染中和渲染外部使用setComment。
this.setComment=this.setComment.bind（this）；
this.\u updateListItem=this.\u updateListItem.bind（this）；
this.\u readListItem=this.\u readListItem.bind（this）；
//抓住所有元素
//[0]-只需要第一个元素
//将此泛型元素强制转换为特定类型的元素（我知道它是），因为变量需要特定类型
const textInput:HTMLInputElement=this.DomeElement.getElementsByTagName（“输入”）[0]作为HTMLInputElement；
//setComment在事件侦听器中使用，每当用户键入此输入字段时，都会调用它。
textInput.addEventListener（“keyup”，this.setComment）；
this.sendFeedback=this.sendFeedback.bind（this）；
const submitbutton:HTMLButtonElement=this.doElement.getElementsByTagName（“按钮”）[0]作为HTMLButtonElement；
submitbutton.onclick=this.sendFeedback；
submitbutton.disabled=真；
}
private\u updateListItem（）：void{
const url:string=this.context.pageContext.site.absoluteUrl+“/_api/web/list/getbytitle（'Feedback'）/items（1）”；
常量项定义：任意={
“标题”：“修改的标题字段值！”}；
常量头：任意={
“X-HTTP-Method”：“合并”，
“如果匹配”：“*”，
};
常量spHttpClientOptions:ISPHttpClientOptions={
“标题”：标题，
“body”：JSON.stringify（itemDefinition）
};
this.context.spHttpClient.post（url，spHttpClient.configurations.v1，sphttpclientations）
.然后（（响应：SPHttpClientResponse）=>{
如果（response.status==204）{
此操作失败。_operationResults.innerHTML=“更新：列表项已成功更新。”；
}否则{
这是._operationResults.innerHTML=“更新：列表项更新失败。”+response.status+“-”+response.statusText；
}
});
}
私有sendFeedback（）：void{
this.context.statusRenderer.clearError（this.doElement）；
const paragraphElement:HTMLParagraphElement=this.DomeElement.getElementsByClassName（styles.successIndicator）[0]作为HTMLParagraphElement；
paragraphElement.innerHTML=“”；
if（this._commentText==未定义| | this._commentText.length==0）{
this.context.statusRenderer.renderError（this.domeElement，“请键入评论或建议”）；
回来
}
if（Environment.type==EnvironmentType.Local）{
this.context.statusRenderer.renderError（this.doElement，“在本地工作台中运行时无法保存反馈”）；
回来
}
const url:string=this.context.pageContext.site.absoluteUrl+“/\u api/web/list/getbytitle（'Feedback'）/items”；
常数项：任何={
“标题”：此文本，
“URL”：window.location.href，
“JobTitle”：此.\u JobTitle
};
常量spHttpClientOptions:ISPHttpClientOptions={
“body”：JSON.stringify（项）
};

很抱歉，有很多代码，但如果我不提供，我不知道您如何理解我需要知道的内容

我希望了解“发送”按钮是如何工作的，以及“更新”按钮是如何在单击时更新任何更改项的。

看起来“发送”按钮onClick事件是用以下代码设置的：

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

submitbutton.onclick = this.sendFeedback;

此处getElementsByTagName（“按钮”）[0]返回在上述HTML中使用创建的第一个元素

我猜按照同样的方法，更新按钮可以这样处理：

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

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

---

请注意，索引从[0]更改为[1]，以使用第二个按钮，以及bind（）的用法。如果没有bind，在调用_updateListItem时，“this”将是未定义的。

谢谢。更新按钮仍然没有做任何事情。是因为它需要自己的事件处理程序，还是我可以使用setComment（事件：event）一个？我得到了TypeError：单击更新按钮时无法将属性“innerHTML”设置为null。