在响应网格顺风中悬停时更改内部 div

Question

因此，对于 CSS，我正在使用 tailwindcss。我已经实现了基于整数的方法，但是当我快速将鼠标悬停在 div 上时，状态仍未更新。如果值为 0，则显示第一个 div，否则显示第二个 div。下面是代码：

 <div className="text-white m-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 grid-flow-row gap-8">
            {
                data.map((d,idx)=>(
                <div onMouseEnter={()=>{toggleState(idx,1)}} onMouseLeave={()=>{toggleState(idx,0)}} key={'event'+idx} className="relative h-96 overflow-hidden" style={{background: "-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))), url('https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80') no-repeat",backgroundSize:'cover'}}>
                    {!v[idx] && (
                        <div className="absolute w-full py-2.5 bottom-0 inset-x-0 text-white text-center leading-4">
                            <div className='divide-y-2 px-2 h-full'>
                                <h2 class="mt-2 mb-2 font-bold text-2xl">{d.title}</h2>
                                <p class="text-lg">{d.dueDate}</p>
                            </div>
                        </div>
                    )}
                    {v[idx] && (
                             <div className="absolute w-full py-2.5 text-white text-center leading-4">
                                <div className='px-2 w-full'>
                                    <h2 class="mt-2 mb-2 font-bold text-2xl">{d.title}</h2>
                                    <p class="text-lg">{d.desc}</p>
                                    <span className='bottom-0 right-0'>Go to Course =</span>
                                    {/* <a href="#" className='align-bottom'>Go to the Course</a> */}
                                </div>
                            </div>
                    )}
                </div>
                ))
            }
    </div>

切换状态函数

const [v,setV] = useState([0,0,0,0,0,0,0]);
      const toggleState = (idx,value)=>{
        const newV = [...v];
        newV[idx]=value;
        setV(newV);
      }

实现此类实用程序的最佳方式是什么？

Answer 1

鉴于您提供的代码片段断章取义，很难为您提供最好的帮助。但要改善用户体验和交互性能，您可以避免处理列表中的所有内容。

您可以开始隔离列表的组件并在单个组件中处理鼠标 in/out。

像这样：

<div>
       {data.map((d,idx)=> <YourComponent d={d} />}
</div>

你的组件：

function YourComponent(props) {

return (
 <div onMouseEnter={...} onMouseLeave={...} >
  ...
 </div>
)}

这样每个组件都会自行处理，而列表不会在每次鼠标移动时 re-render。

在响应网格顺风中悬停时更改内部 div

Change inner div on hover in react grid tailwind

reactjs

hover

mouseenter

mouseleave