在react中为图像按钮添加功能

Question

我的 React 应用程序上有 facebook 和 google 按钮的代码，但我不想使用标准锁，但我有我的样式按钮作为图像资产，并且不知道如何将功能放入图像中。

我尝试使用 onClick 锚标记，但我没有收到任何错误，但是当我点击时没有任何反应。

这里是 Facebook 登录组件 (facebooklogin.js) 代码：

import React from "react";
import {LoginSocialFacebook} from "reactjs-social-login";
import {FacebookLoginButton} from "react-social-login-buttons";
import  {useState} from 'react';





function FacebookLogin()   {
  
  
  
  const [profile, setProfile] = useState(null);
    return(
        <div>
        {!profile ? <LoginSocialFacebook
      appId="922883705581488"
      onResolve={(response) => {
        console.log(response);
        setProfile(response.data);
      }}
      onReject={(error) => {
        console.log(error);
      }}
      >
        <FacebookLoginButton />
      </LoginSocialFacebook>: ''}
  
      {profile ? <div>
        <h1>{profile.name}</h1>
        <img src={profile.picture.data.url} />
        
         </div>: ''}
         
   
      </div>
  

   
    );
}
export default FacebookLogin 

这是谷歌登录组件 (GoogleLogin.js)：

import React from "react"; 
import { useEffect, useState } from "react";
import jwt_decode from "jwt-decode";



function GoogleLogin () {
  

    const [user, setUser] = useState({});

function handleCallbackResponse(response){
console.log(" Encoded JWT ID token: " + response.credential);
var userObject = jwt_decode(response.credential);
console.log(userObject);
setUser(userObject);
document.getElementById("signInDiv").hidden =true;
}

function handleSignOut(event) {
  setUser({});
  document.getElementById("signInDiv").hidden =false;
}

useEffect(()   => {
/* global google */
google.accounts.id.initialize({
  client_id: "246695638318-n1css7uk54ali3qj59rc9cijrkrciigi.apps.googleusercontent.com",
  callback: handleCallbackResponse
});

google.accounts.id.renderButton(
  document.getElementById("signInDiv"),
   {theme: "outline", size: "large"}
);

google.accounts.id.prompt();

}, []);

// If we have no user: sign in button
// if we have a user: show the log out button
return (
    <div>
<div id="signInDiv"></div>
      { Object.keys(user).length !== 0 && 
      <button onClick={(e) => handleSignOut(e)}>Sign Out</button>
      }
      
      { user && 
      <div>
        <img src={user.picture}></img>
        <h3>{user.name}</h3>
      </div>
      }
      
      
      
      
      
      </div>


      
);


}

export default GoogleLogin

App.js：

import FacebookLogin from "./components/facebooklogin";
import GoogleLogin from "./components/GoogleLogin";
import { Component } from "react";
import './App.css';
import background from './cover.png'
import  SecondLogin  from "./SecondLogin";
import Google from "./components/GoogleLogin";






class App extends Component { 
    render(){ 
 return (

    <div className="App">
<div style={{backgroundImage: `url(${background})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
width: '1000px', height:'1000px', position: 'relative', left:'-300px'

    }}>
<h1>Welcome to the<h1></h1> W3llbeing Games</h1>
    
<img className="imgf" src= {require('./Loginscreen/Sign_up_fb.png')}  alt=""></img>
<br></br>
<img className="imgg" src= {require('./Loginscreen/Sign_up_google.png')}  alt=""></img>
<br></br>
<img className="imga" src= {require('./Loginscreen/Sign_up_apple.png')}  alt=""></img>
<br></br>
<img className="imge" src= {require('./Loginscreen/Sign_up_email.png')}  alt=""></img>
   

   <p>Already have an account?<a><u> sign in here</u></a> </p>
   
   </div>



   
   </div>
 );
}
}

export default App;

index.html文件中的google登录脚本：

 <script src="https://accounts.google.com/gsi/client" async defer></script>

我想让前两个 img 具有 facebook 和 google 登录的功能。