时间戳

首页 > 解决方案 > React 的问题“无法读取 null 的属性‘addEventListener’”

reactjs - React 的问题“无法读取 null 的属性‘addEventListener’”

问题描述

尝试将登录功能添加到登录按钮，但由于某种原因，它说“无法读取 null 的属性 'addEventListener'”，我不知道如何修复它。

我已经添加了window.onload = function(){}对我的其他组件有效但对这个无效的组件。

问题出在这部分。

window.onload = function(){
document.getElementById("submit").addEventListener("click", function(){
    UserLogin();
})
}

这是整个代码：

import React from 'react';
import './App.css';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './Config';
//import { BrowserRouter as Router, Route, Link } from "react-router-dom";

firebase.initializeApp(firebaseConfig);



function UserLogin(){
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        //var errorCode = error.code;
        //var errorMessage = error.message;
      });
}

window.onload = function(){
    document.getElementById("submit").addEventListener("click", function(){
        UserLogin();
    })
}


function Login(){
    return(
        <div class="start">
            <h1>Login</h1>
            <div class="input">
                <input id="email" type="text" placeholder="email"></input>
                <input id="password" type="password" placeholder="password"></input>
                <button id="submit">Login</button>
            </div>
        </div>
    )
}

export default Login;

标签： reactjs

解决方案

如果您希望UserLogin在组件完成加载时自动调用您的函数，那么您可以使用(Added in React 16.8)。Hooks 

import React, {useEffect} from 'react';


function Login(){
    useEffect(() => {
      UserLogin();
    });
    return(
        <div class="start">
            <h1>Login</h1>
            <div class="input">
                <input id="email" type="text" placeholder="email"></input>
                <input id="password" type="password" placeholder="password"></input>
                <button id="submit">Login</button>
            </div>
        </div>
    )
}

推荐阅读