0

我一直在我的 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>;
4

1 回答 1

1

您可以使用此处的templateRendered事件，该事件在模板呈现后触发并传递元素和 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 来渲染模板，这也很有帮助。

PS Microsoft Graph Toolkit正在进行 PR 以通过添加直接在模板中注册事件的功能来简化此过程

于 2020-02-11T18:20:38.643 回答