Как мне добавить кнопку, вложенную в шаблон mgt-person-card? - PullRequest
Новая
       30

Как мне добавить кнопку, вложенную в шаблон mgt-person-card?

0 голосов
/ 11 февраля 2020

Я внедрил инструментарий MGT в моем React + Typescript. Все работает хорошо, но я попытался добавить кнопку в шаблон на карточке. Но 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>;

1 Ответ

1 голос
/ 11 февраля 2020

Здесь вы можете использовать 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 , чтобы сделать это еще проще, добавив возможность регистрации событий непосредственно в ваших шаблонах

...