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

我正在尝试在我的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;

---

因为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;

import React，{Component}来自'React'；
从“@microsoft/mgt”导入{MgtLogin，Providers，MsalProvider}；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
Providers.globalProvider=新的MsalProvider({
客户ID：“a974dfa0-9f57-49b9-95db-90f04ce2111a”
});
}
render（）{
返回(
);
}
handleLogin（）{
console.log（“登录完成”）；
}
componentDidMount（）{
this.refs.loginComponent.addEventListener（'loginCompleted'，this.handleLogin）；
}
}
导出默认应用程序；

我也有同样的问题。你能检查一下这个问题吗

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;