Microsoft Graph Toolkit组件的事件处理程序未在React App中调用

Question

我正在尝试在我的React应用中使用Microsoft Graph Toolkit的登录组件。它可以正常工作，但是我似乎无法使任何事件都发射。例如 -

import React from "react";
import { MgtLogin, Providers, MsalProvider } from "@microsoft/mgt";
import "./App.css";
Providers.globalProvider = new MsalProvider({
  clientId: "a974dfa0-9f57-49b9-95db-90f04ce2111a"
});
function handleLogin() {
  console.log("login completed");
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <mgt-login loginCompleted={handleLogin} />
      </header>
    </div>
  );
}
export default App;

handleLogin从未被调用。

更新

这是与钩子一起工作的方式。

import React, { useEffect, useRef } from "react";
import { Providers, MsalProvider, LoginType } from "@microsoft/mgt";
import "./App.css";
Providers.globalProvider = new MsalProvider({
  clientId: "a974dfa0-9f57-49b9-95db-90f04ce2111a",
  loginType: LoginType.Popup
});
function App() {
  const loginComponent = useRef(null);
  useEffect(() => {
    console.log("loginComponent", loginComponent);
    loginComponent.current.addEventListener("loginCompleted", () =>
      console.log("Logged in!")
    );
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <mgt-login ref={loginComponent} />
      </header>
    </div>
  );
}
export default App;

Answer 1

由于React实现了自己的合成事件系统，因此在不使用解决方法的情况下，它无法聆听来自自定义元素的DOM事件。您需要使用ref引用工具包组件，并使用addEventListener手动附加事件听众。

import React, { Component } from 'react';
import { MgtLogin, Providers, MsalProvider } from "@microsoft/mgt";
import "./App.css";
class App extends Component {
    constructor(){
        super();
        Providers.globalProvider = new MsalProvider({
            clientId: "a974dfa0-9f57-49b9-95db-90f04ce2111a"
        });
    }
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <mgt-login ref="loginComponent" />
                </header>
            </div>
        );
    }
    handleLogin() {
        console.log("login completed");
    }
    componentDidMount() {
        this.refs.loginComponent.addEventListener('loginCompleted', this.handleLogin);
    }
}
export default App;