Question

我正在尝试为鼠标进入和离开容器创建一个show / hide div。我在这里遵循此示例（SVGAnimationElement），但是当我将鼠标悬停在“删除容器” div上时，它却消失了。发生此问题，因为它采取onMouseLeave操作。有什么办法可以解决此问题，或者可能使我的解决方案更好？这是正在发生的事情的演示（https://upmostly.com/tutorials/react-onhover-event-handling-with-examples）。

import React, { useState } from 'react';
import axios from 'axios';

export default function JobInfo({ jobs_info }) {
    const [isShown, setIsShown] = useState(false);

    const changeBackground = (x) => {
        x.target.style.backgroundImage =
            'linear-gradient(to right, #4639a7, #78019c)';
    };

    const changeBackground2 = (x) => {
        x.target.style.background = 'rgb(37, 45, 73)';
    };

    return (
        <div className='row'>
            <div
                className='container'
                onMouseEnter={() => setIsShown(true)}
                onMouseLeave={() => setIsShown(false)}

            >
                <div className='row'>
                    <div className='job-title'>{jobs_info.title}</div>
                </div>
                <div className='row wrapper'>
                    <div className='category-title'>Category</div>
                    <div className='location-title'>Location</div>
                    <div className='type-title'>Type of Job</div>
                    <div className='creator-title'>Job Creator</div>
                </div>
                <div className='row wrapper'>
                    <div className='category'>{jobs_info.job_team.title}</div>
                    <div className='location'>
                        {jobs_info.job_location.title}
                    </div>
                    <div className='type'>{jobs_info.job_work_type.title}</div>
                    <div className='creator'>{jobs_info.user.name}</div>
                </div>
            </div>
            <div
                className='counter-container'
                id='counter-container'
                onMouseEnter={changeBackground}
                onMouseLeave={changeBackground2}
            >
                Candidates <br />
                {jobs_info.candidates_count}
            </div>
            {isShown && (
                <div className='delete-container center'>
                    <ion-icon id='trash' name='trash'></ion-icon>
                </div>
            )}
        </div>
    );
}

Answer 1

发生此问题是因为delete-container在container层次结构之外，因此在容器上触发了mouseleave事件。将delete-container渲染为容器的子元素，并相应地设置其样式

return (
    <div className='row'>
        <div
            className='container'
            onMouseEnter={() => setIsShown(true)}
            onMouseLeave={() => setIsShown(false)}

        >
            <div className='row'>
                <div className='job-title'>{jobs_info.title}</div>
            </div>
            <div className='row wrapper'>
                <div className='category-title'>Category</div>
                <div className='location-title'>Location</div>
                <div className='type-title'>Type of Job</div>
                <div className='creator-title'>Job Creator</div>
            </div>
            <div className='row wrapper'>
                <div className='category'>{jobs_info.job_team.title}</div>
                <div className='location'>
                    {jobs_info.job_location.title}
                </div>
                <div className='type'>{jobs_info.job_work_type.title}</div>
                <div className='creator'>{jobs_info.user.name}</div>
            </div>
            {isShown && (
                <div className='delete-container center'>
                    <ion-icon id='trash' name='trash'></ion-icon>
                 </div>
            )}
        </div>
        <div
            className='counter-container'
            id='counter-container'
            onMouseEnter={changeBackground}
            onMouseLeave={changeBackground2}
        >
            Candidates <br />
            {jobs_info.candidates_count}
        </div>
    </div>
);

不过，您可以简单地使用CSS悬停事件来显示或隐藏delete-container without the need for state after rendering delete-container as a child of container`

.scss

.container {
    .delete-container {
        display: none;
        // other styles
    }
    &:hover {
        .delete-container {
           display: block;
        }
    }
    // other styles
}

React-使用挂钩将鼠标悬停时显示/隐藏

1 个答案: