如何在 mgt-person-card 模板中嵌套按钮？

Question

我一直在我的 React + Typescript 中实现 MGT 工具包。一切正常，但我尝试在卡片的模板中添加一个按钮。但是 onClick 似乎不起作用，我假设这与它是一个模板这一事实有关。

我发现可能存在问题，因为它是一个可能会被复制的模板，但我认为下面的解决方法会很好。但无论我得到什么，我都无法从

中得到任何东西

    const mgtPersonRef = useRef<null | MgtPerson>(null);

    useEffect(() => {
        const mgtPerson = mgtPersonRef.current;
        if (mgtPerson === null) {
            return;
        }
        mgtPerson.personCardInteraction = PersonCardInteraction.hover;
        const button= mgtPerson.querySelector('#' + BUTTON);

        if (button) {
            button.addEventListener('onmousedown', () => {console.log("DONE IT!")});
            return button.removeEventListener('onmousedown', () => void 0);
        }

    }, [mgtPersonRef.current]);
    return <mgt-person
        show-name={true}
        user-id={id}
        ref={mgtPersonRef}
    >
        <template data-type="person-card">
            <mgt-person-card person-details="{{person}}" >
                {
                    showButton
                        ? <template data-type="additional-details">
                            <button
                                id={BUTTON}
                            >Click me</button>
                        </template>
                        : null
                }
            </mgt-person-card>
        </template>
    </mgt-person>;

Answer 1

您可以在此处使用 templateRendered event，它会在呈现模板并传递元素和 dataContext 供您使用后触发。您必须为该活动注册两次，一次为人物，然后为人物卡片。

mgtPerson.addEventListener('templateRendered', e => {

  const personCard = e.detail.element.querySelector('mgt-person-card');
  personCard.addEventListener('templateRendered', e => {

    const templateType = e.detail.templateType; // the data-type of the template
    const dataContext = e.detail.context; // the data context passed to the template
    const element = e.detail.element; // the root element of the rendered template

    const button = element.querySelector('button');
    if (button) {
      button.addEventListener('click', () => {});
    }

  });
});

如果您还想使用 React 呈现模板，这也会很有帮助。

P.S。 Microsoft Graph 工具包上有一个 PR in progress 可以通过添加直接在模板中注册事件的功能来简化此操作

如何在 mgt-person-card 模板中嵌套按钮？

How do I have a button nested in the mgt-person-card template?

typescript

reactjs

microsoft-graph-toolkit