文章/答案/技术大牛

发布

社区首页 >问答首页 >未在React应用程序中调用的组件的事件处理程序

问未在React应用程序中调用的组件的事件处理程序
EN

Stack Overflow用户

提问于 2019-05-13 22:18:47

回答 1查看 457关注 0票数 3

我试图在我的React应用程序中使用来自的登录组件。它工作的很好，但我似乎不能让任何事件发生。例如-

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;

reactjs

web-component

microsoft-graph-toolkit

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-13 22:38:54

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56120549

复制

相似问题

问未在React应用程序中调用的组件的事件处理程序
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未在React应用程序中调用的组件的事件处理程序EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未在React应用程序中调用的组件的事件处理程序
EN