addEventListener到SPFx Webpart顯示SharePoint列表數據

Question

我正在嘗試使用React在SPFx webpart中的SharePoint列表中的每個項目上添加一個click eventlistener

生成的webpart html如下所示：

<div class="visualstyle_276d6985">
<h1>Active People</h1>
<ul class="peoplelist_276d6985">
<li class="activeperson" id="id3">Alistair Speirs</li>
<li class="activeperson" id="id22">Obeida Bakhach</li>
</ul>
</div>

在webpart渲染方法中，我打電話

ReactDom.render(element, this.domElement);

然后我嘗試添加addEventListeners

我的問題是我只返回1個元素

public render(): void {
const element: React.ReactElement<ICandidateListWebPartProps > =    React.createElement(
ActivePersonList,
{
description: this.properties.description,
siteurl: this.context.pageContext.web.absoluteUrl,
activepersonList: null
}
);

ReactDom.render(element, this.domElement);
this.setOnClickHandlers();
}

private setOnClickHandlers() : void {
const webPart: ActivePersonListWebPart = this;
let listItems = this.domElement.querySelectorAll("li.activeperson")
let itemCt:number = listItems.length;
//change to .Foreach once this works
for(let j:number = 0; j<itemCt; j++){
listItems[j].addEventListener('click', (event) => {
this.liClicked(event.target);
});
}
}

private liClicked(target): void{
let me:any = target;
alert(target);
}

我打電話的時候

this.domElement.querySelectorAll("li.activeperson")

我得到第一個li元素，而不是全部（或者在我的例子中都是）

我希望我可以得到所有這些。

Answer 1

我想我想出來了。
我想對標簽使用querySelectorAll。

然后在函數上訪問event.target

private setOnClickHandlers(webPart) : void {
  let listItems = this.domElement.querySelectorAll("ul")
  for(let j:number = 0; j<listItems.length; j++){
    listItems[j].addEventListener('click', (event) => {
      this.liClicked(event);
    });
  }
}

private liClicked(ev): void{
  let me:any = ev.target;
  alert(me.id);
}