onClick 事件可以处理 onMouseEnter 事件吗？

Question

所以我在 div 的右侧显示了一堆徽标，在左侧显示了信息卡。

悬停时的每个徽标都会使卡片显示特定信息。我正在尝试创建一个功能，当单击徽标而不是仅将鼠标悬停时，它将使卡片粘在他们单击的徽标中的信息上。

这个问题的出现是因为有些人使用光标阅读。因此，如果用户在屏幕的最右侧并试图从其中一个徽标中查看信息，它会尝试返回卡片读取信息，并且由于 onMouseEnter 事件而意外更改它，从而使这对他们来说是一个糟糕的用户体验。

我一直在努力解决这个问题，可能没有正确询问谷歌，希望你们能理解我的要求。

提前谢谢你！

import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from "styled-components";
import "react-circular-progressbar/dist/styles.css";
import Cards from "./Cards";
import { FaRegEye, VscGraphLine, BsFileEarmarkText, FaGitAlt, IoRocketSharp, SiFastapi } from 'react-icons/all';
import { memerep } from "../../Helper/memes";
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';



const ShowAndHide = ( ) => {
  
  const professions = [
    {
      circular: <CircularProgressbar value= "99" text={`99%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one percentage to another, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${99 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      git:<FaGitAlt/>,
      industrycon: <IoRocketSharp alt="Space Rocket"/> ,
      key: "card1",
      meme: <img src={memerep(0)} className="memes"/>,
      project:"PROYECTOlola",
      icon: <FaRegEye alt="Computer-vision-logo" />,
      percentage: 99,
      specialty: "CV",
      industry:"Gases Clinicos",
      summary:"Compliance del 99% de normas sanitarias para operación en pandemia , identifiacando dist. social, aforo y mascarilla.",
      logo: <img className="Mediumsquare" src={imgrep(1)} alt="altofem" />
    },


    { 
      circular: <CircularProgressbar value= "98" text={`98%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one percentage to another, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${98 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      key: "card2",
      industrycon: <IoRocketSharp alt="Space Rocket"/>,
      git:<FaGitAlt/>,
      project:"PROYECTO",
      icon: <VscGraphLine alt="Data-analytics-logo"/>,
      specialty: "NPL",
      industry: "inmobiliaria",
      summary: "Un proyecto Vimac es la garantía de un diseño bien pensado, una arquitectura de tradición basada en principios sólidos, que busca otorgar hogares de calidad que se adaptan a un estilo de vida contemporáneo.",
      logo: <img className="Biground" src={imgrep(2)} alt="vimac" />,
    },


    {
      circular: <CircularProgressbar value= "97" text={`97%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one nother, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${97 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      key: "card3",
      industrycon: <IoRocketSharp alt="Space Rocket"/>,
      git:<FaGitAlt/>,
      project:"PROYECTO",
      icon:<BsFileEarmarkText alt="Natural-language-processing-logo"/> ,
      specialty: "NLP",
      industry: "RRHH",
      summary:"Ahorro de alrededor un 96% de tiempo empleado para diagnóstico de CV's.",
      logo: <img  className="Mediumsquare" src={imgrep(3)} alt="peopleparnerts" />,
    },


    { 
      circular: <CircularProgressbar value= "96" text={`96%`} 
      styles={buildStyles({
       // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
       strokeLinecap: 'butt',
       // Text size
       textSize: '16px',
       // How long animation takes to go from one nother, in seconds
       pathTransitionDuration: 1.5,
       // Colors
       pathColor: `rgba(58, 123, 213, ${96 / 100})`,
       textColor: '#102647',
       trailColor: '#e0e0eb',
       backgroundColor: '#3e98c7',
     })}
     /> ,
      key: "card4",
      industrycon: <IoRocketSharp alt="Space Rocket"/>,
      git:<FaGitAlt/>,
      project:"PROYECTO",
      icon: <SiFastapi alt="API"/>,
      specialty: "cv",
      industry: "Big Data",
      summary: "Para entregar las soluciones que nuestros clientes necesitan, hemos establecido alianzas con destacadas empresas e instituciones de tecnología o educación superior.",
      logo: <img width="" className="Mediumsquare" src={imgrep(4)} alt="uplanner" />
    }
  ];
  
  
  const [myProfession, setMyProfession] = useState("");
  const[clickStatus, setClickStatus]= useState(false);
 

  if (clickStatus === true) {
    console.log("clicked")
    
  }
  else if(clickStatus === false){
    console.log("not clicked");
  }
   return (

     <>
      {/* INFORMATION CARDS */}
      <Container> 
        <LeftSide>
          <Bottom>
            {professions &&(
          <Cards 
          circular={myProfession.circular}
          project={myProfession.project}
          icon={myProfession.icon}
          percentage={myProfession.percentage} 
          specialty= {myProfession.specialty}
          industry={myProfession.industry}
          summary={myProfession.summary}
          git={myProfession.git}
          industrycon={myProfession.industrycon}
           />       
            )}    
            
            {professions.map((profession) => ( 
              <info
              circular={profession.circular}
              project={profession.project}
              icon={profession.icon}
              git={profession.git}
              industrycon={profession.industrycon}
              percentage={profession.percentage}
              specialty={profession.specialty}
              industry={profession.industry}
              summary={profession.summary}
              onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
            ))}
          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide>
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map((profession) => (
              <>
                <img 
                  type="img"
                  key={profession}
                  id={profession.logo.props.id}
                  src={profession.logo.props.src}
                  className={profession.logo.props.className}
                  onMouseEnter={() => setMyProfession(profession)}
                  onClick={()=> setClickStatus(true)}
                  onMouseLeave={()=> setClickStatus(false)}
                ></img>
              </>
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

Answer 1

希望我明白你的意思。

如果您想像以前那样在右侧徽标中添加 onClick 事件，

import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from "styled-components";
import "react-circular-progressbar/dist/styles.css";
import Cards from "./Cards";
import { FaRegEye, VscGraphLine, BsFileEarmarkText, FaGitAlt, IoRocketSharp, SiFastapi } from 'react-icons/all';
import { memerep } from "../../Helper/memes";
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

  
  const [myProfession, setMyProfession] = useState("");
  const[Clicked, setClicked]= useState(false);


  const handleSelectLogo = (e) => {
    logoKey = e.currentTarget.dataset.id; // data-key
    const profession = professions.find(prof => prof.key === logoKey);
    setMyProfession(profession);
    setClicked(true);
  }

  const handleLeaveLogo = (e) => {
      if(Clicked){
        return;
      }
      setMyProfession("")
  }

   return (

     <>
      {/* INFORMATION CARDS */}
      <Container> 
        <LeftSide>
          <Bottom>
            {myProfession && (
          <Cards 
          circular={myProfession.circular}
          project={myProfession.project}
          icon={myProfession.icon}
          percentage={myProfession.percentage} 
          specialty= {myProfession.specialty}
          industry={myProfession.industry}
          summary={myProfession.summary}
          git={myProfession.git}
          industrycon={myProfession.industrycon}
           />       
            )}    
            
            {professions.map((profession) => ( 
              <info
              circular={profession.circular}
              project={profession.project}
              icon={profession.icon}
              git={profession.git}
              industrycon={profession.industrycon}
              percentage={profession.percentage}
              specialty={profession.specialty}
              industry={profession.industry}
              summary={profession.summary}
              onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
            ))}
          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide>
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map((profession) => (
              <>
                <img 
                  type="img"
                  key={profession}
                  id={profession.logo.props.id}
                  data-key={profession.key}
                  src={profession.logo.props.src}
                  className={profession.logo.props.className}
                  onMouseEnter={() => setMyProfession(profession)}
                  onClick={handleSelectLogo}
                  onMouseLeave={handleLeaveLogo}
                ></img>
              </>
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

您可以像这样将数据集添加到您的 dom 元素中，然后您可以在函数中访问该键（或唯一值）。 希望能帮到你