问题描述
我正在制作我的小作品集页面，想在“关于”页面上添加一些背景/有趣的内容。现在，它会同时显示所有 4 个文章列的信息，而不仅仅是我悬停的那个。
这是我的代码和逻辑。
import React,{ useState } from 'react';
import './About.css'
const About = () => {
const [inHover,setHover] = useState(false)
return (
<div className="about">
<div className="about__container">
<h1 className="about__headline">Just Human Things...</h1>
<div className="about__columns">
<article
className="about__column"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
<h4>History</h4>
{inHover &&
<div>
<br></br>
<ul>
<li>B.S. - Pre-Medical Biology</li>
<li>A.P. - Ayurvedic Practitioner</li>
<li>RYT-500 - Ayurvedic Yoga</li>
<li>C.H. - Clinical Herbalist</li>
<li>L.D.T. - Lymph Drainage Therapist</li>
<li>Nutritionist</li>
</ul>
<br></br>
<p>Flipped my whole career field from health and nutrition into tech,October 2020,without any prevIoUs experience in coding,and I've been engrossed ever since! I kNow I still have a lot to learn,but I'm ready to absorb all I can!</p>
</div>
}
</article>
<article
className="about__column"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
<h4>Hobbies</h4>
{inHover &&
<div>
<br></br>
<ul>
<li>Being cozy is my favorite emotion</li>
<li>House plant care and husbandry</li>
<li>18th Century cooking and recipes</li>
<li>Building relationship and rapport with Ravens</li>
<li>World of Warcraft/Diablo III</li>
<li>Marie Kondo-inspired organizing</li>
<li>Watercolor and Acrylic painting</li>
<li>Connecting with nature through ritual</li>
</ul>
</div>
}
</article>
<article className="about__column"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
<h4>What I'm looking for</h4>
{inHover &&
<div>
<p>...in a work environment: </p>
<br></br>
<ul>
<li>Collaborative atmosphere</li>
<li>Autonomy and trust</li>
<li>Appreciates my playful enthusiasm</li>
<li>loves my creative/innovative ideas</li>
<li>Conducive to skills improvement</li>
<li>Clear communication</li>
<li>Mentorship</li>
</ul>
</div>
}
</article>
<article className="about__column"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
<h4>Personality Traits: </h4>
{inHover &&
<div>
<br></br>
<ul>
<li>ENTHUSIASM!</li>
<li>Able to discuss and resolve conflict</li>
<li>Inclusive and team-oriented</li>
<li>Asks questions until confident in what is expected of me</li>
<li>CurIoUs and inquisitive</li>
<li>Takes responsibility for actions</li>
<li>Empathetic and emotionally intelligent</li>
<li>Accept when I'm wrong</li>
<li>Excellent in written and oral communication</li>
<li>AckNowledges shortcomings and works to improve</li>
</ul>
</div>
}
</article>
</div>
</div>
</div>
);
}
export default About;
解决方法
看起来是因为所有部分都依赖于相同的状态。因此，一旦该状态发生变化，所有部分都会受到影响。我将如何处理这个问题是让 state 保持当前悬停的部分。例如
folder3您只是存储一个布尔值来表示 3 个布尔值标志。最直接的解决方法是存储索引而不是布尔值。然后只需在用户悬停时将状态设置为当前索引而不是 true 并在他们没有悬停任何内容时将其设置为 null。
import React,{ useState } from 'react';
import './About.css'
const About = () => {
const [hoverIndex,setHoverIndex] = useState(null)
return (
<div className="about">
<div className="about__container">
<h1 className="about__headline">Just Human Things...</h1>
<div className="about__columns">
<article
className="about__column"
onMouseEnter={() => setHover(0)}
onMouseLeave={() => setHover(null)}>
<h4>History</h4>
{hoverIndex === 0 &&
<div>
<br></br>
<ul>
<li>B.S. - Pre-Medical Biology</li>
<li>A.P. - Ayurvedic Practitioner</li>
<li>RYT-500 - Ayurvedic Yoga</li>
<li>C.H. - Clinical Herbalist</li>
<li>L.D.T. - Lymph Drainage Therapist</li>
<li>Nutritionist</li>
</ul>
<br></br>
<p>Flipped my whole career field from health and nutrition into tech,October 2020,without any previous experience in coding,and I've been engrossed ever since! I know I still have a lot to learn,but I'm ready to absorb all I can!</p>
</div>
}
</article>
<article
className="about__column"
onMouseEnter={() => setHover(1)}
onMouseLeave={() => setHover(null)}>
<h4>Hobbies</h4>
{hoverIndex === 1 &&
<div>
<br></br>
<ul>
<li>Being cozy is my favorite emotion</li>
<li>House plant care and husbandry</li>
<li>18th Century cooking and recipes</li>
<li>Building relationship and rapport with Ravens</li>
<li>World of Warcraft/Diablo III</li>
<li>Marie Kondo-inspired organizing</li>
<li>Watercolor and Acrylic painting</li>
<li>Connecting with nature through ritual</li>
</ul>
</div>
}
</article>
<article className="about__column"
onMouseEnter={() => setHover(2)}
onMouseLeave={() => setHover(null)}>
<h4>What I'm looking for</h4>
{hoverIndex === 2 &&
<div>
<p>...in a work environment: </p>
<br></br>
<ul>
<li>Collaborative atmosphere</li>
<li>Autonomy and trust</li>
<li>Appreciates my playful enthusiasm</li>
<li>Loves my creative/innovative ideas</li>
<li>Conducive to skills improvement</li>
<li>Clear communication</li>
<li>Mentorship</li>
</ul>
</div>
}
</article>
<article className="about__column"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
<h4>Personality Traits: </h4>
{inHover &&
<div>
<br></br>
<ul>
<li>ENTHUSIASM!</li>
<li>Able to discuss and resolve conflict</li>
<li>Inclusive and team-oriented</li>
<li>Asks questions until confident in what is expected of me</li>
<li>Curious and inquisitive</li>
<li>Takes responsibility for actions</li>
<li>Empathetic and emotionally intelligent</li>
<li>Accept when I'm wrong</li>
<li>Excellent in written and oral communication</li>
<li>Acknowledges shortcomings and works to improve</li>
</ul>
</div>
}
</article>
</div>
</div>
</div>
);
}
export default About;
您需要指定正在悬停的部分。你可以这样做：
import React,{ useState } from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<About/>
)
}
}
const About = () => {
const [hoveredSection,setHoveredSection] = useState(null);
const onMouseEnter = (name) => () => setHoveredSection(name)
const onMouseLeave = () => setHoveredSection(null)
return (
<div className="about">
<div className="about__container">
<h1 className="about__headline">Just Human Things...</h1>
<div className="about__columns">
<article
className="about__column"
onMouseEnter={onMouseEnter(1)}
onMouseLeave={onMouseLeave}>
<h4>History</h4>
{hoveredSection === 1 &&
<div>
<br></br>
<ul>
<li>B.S. - Pre-Medical Biology</li>
<li>A.P. - Ayurvedic Practitioner</li>
<li>RYT-500 - Ayurvedic Yoga</li>
<li>C.H. - Clinical Herbalist</li>
<li>L.D.T. - Lymph Drainage Therapist</li>
<li>Nutritionist</li>
</ul>
<br></br>
<p>Flipped my whole career field from health and nutrition into tech,but I'm ready to absorb all I can!</p>
</div>
}
</article>
<article
className="about__column"
onMouseEnter={onMouseEnter(2)}
onMouseLeave={onMouseLeave}>
<h4>Hobbies</h4>
{hoveredSection === 2 &&
<div>
<br></br>
<ul>
<li>Being cozy is my favorite emotion</li>
<li>House plant care and husbandry</li>
<li>18th Century cooking and recipes</li>
<li>Building relationship and rapport with Ravens</li>
<li>World of Warcraft/Diablo III</li>
<li>Marie Kondo-inspired organizing</li>
<li>Watercolor and Acrylic painting</li>
<li>Connecting with nature through ritual</li>
</ul>
</div>
}
</article>
<article className="about__column"
onMouseEnter={onMouseEnter(3)}
onMouseLeave={onMouseLeave}>
<h4>What I'm looking for</h4>
{hoveredSection === 3 &&
<div>
<p>...in a work environment: </p>
<br></br>
<ul>
<li>Collaborative atmosphere</li>
<li>Autonomy and trust</li>
<li>Appreciates my playful enthusiasm</li>
<li>Loves my creative/innovative ideas</li>
<li>Conducive to skills improvement</li>
<li>Clear communication</li>
<li>Mentorship</li>
</ul>
</div>
}
</article>
<article className="about__column"
onMouseEnter={onMouseEnter(4)}
onMouseLeave={onMouseLeave}>
<h4>Personality Traits: </h4>
{hoveredSection === 4 &&
<div>
<br></br>
<ul>
<li>ENTHUSIASM!</li>
<li>Able to discuss and resolve conflict</li>
<li>Inclusive and team-oriented</li>
<li>Asks questions until confident in what is expected of me</li>
<li>Curious and inquisitive</li>
<li>Takes responsibility for actions</li>
<li>Empathetic and emotionally intelligent</li>
<li>Accept when I'm wrong</li>
<li>Excellent in written and oral communication</li>
<li>Acknowledges shortcomings and works to improve</li>
</ul>
</div>
}
</article>
</div>
</div>
</div>
);
}
ReactDOM.render(
<App />,document.getElementById('container')
);