addEventListener для SPFx Webpart, показывающий данные списка SharePoint - PullRequest
Новая
       10

addEventListener для SPFx Webpart, показывающий данные списка SharePoint

0 голосов
/ 26 марта 2019

Я пытаюсь добавить список событий click для каждого элемента из списка SharePoint в веб-части SPFx, используя React

Сгенерированный 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, а не все (или оба в моем примере)

Я ожидаю, что смогу получить все из них.

1 Ответ

0 голосов
/ 26 марта 2019

Я думаю, что я понял это.
Я хочу использовать 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);
}
...