reactjs - 无状态组件中悬停时的文本更改

Question

我有一个图标列表。悬停时，我试图显示相应的文本。有没有办法用无状态组件来做到这一点？

const Socialbar = (props) => {
   let spanText;

   function socialName(sName) {
    spanText = sName;
   }

   return (
     <div>
      <i><a onMouseEnter={socialName('Instagram')} onMouseExit={socialName('')} href=""><FontAwesomeIcon="faInstagram" /></a></i>
      <h2>{spanText}</h2>
     </div>
  );
}

标签： reactjs

Answer 1

import React, {useState} from 'react';

const Socialbar = (props) => {
   const [spanText, setSpanText] = useState('');

   function socialName(sName) {
    if (sName !== spanText) {
        setSpanText(sName);
    }
   }

   return (
     <div>
      <i><a onMouseEnter={() => socialName('Instagram')} onMouseLeave={() => socialName('')} href=""><FontAwesomeIcon="faInstagram" /></a></i>
      <h2>{spanText}</h2>
     </div>
  );
}