Question

我正在尝试使用React在SPFx Webpart的SharePoint列表中的每个项目上添加单击事件监听器。

生成的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。

然后在函数上访问事件。target

<?php

foreach ($dop[1] as $displayop1) {
    foreach ($dop[9] as $displayop2) {
        foreach ($dop[15] as $displayop3) {
            echo $displayop1 . "<p>";

            echo $displayop2 . "<p>";

            $i++;
            if ($i == 2) {
                break;
            }
            echo $displayop3 . "<p>";
        }
    }
}

?>

<?php
foreach (array_combine($dop[1], $dop[9], $dop[15]) as $dop1 => $dop2 => $dop3) {
    echo $dop1.$dop2.$dop3;
}
?>

向SPFx Webpart的addEventListener显示SharePoint列表数据

1 个答案: