在 React 的 .map 迭代中对单个元素使用 onMouseEnter答案

【问题标题】：Use onMouseEnter on a single element within .map iteration in React在 React 的 .map 迭代中对单个元素使用 onMouseEnter
【发布时间】：2020-01-10 07:27:57
【问题描述】：

我试图在从 .map 数组返回的项目列表上实现悬停动作。我希望悬停只影响一个元素，而是影响所有元素。这是我的代码。

import { MDBTable, MDBTableHead, MDBTableBody, MDBCol, MDBCard, MDBCardBody } from "mdbreact";
import { Paper, Box } from '@material-ui/core';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { motion } from 'framer-motion'
import { useState, useEffect } from 'react'


const packageDetails = [...]  
    
export default () => {
    let [elevation, setElevation] = useState(1);

    useEffect(() => {
        
    })
    
    return(
    <Box className="container pt-3 mt-5 mb-5 ">
        <h1 className="text-center pb-5">NOTRE TABLEAU DE PRIX</h1>
        <Box className="row">
        
        {packageDetails.map( (packageDetail, index) => 
        
        <div  className="col-md-3 col-sm-6 col-xs-12 mb-5 ">
        <Paper  elevation={elevation} className="single-table" onMouseEnter={() => setElevation(prevElevation => 5)} onMouseLeave={()=> setElevation(prevElevation => 2)}>
        <MDBTable>
            <MDBTableHead>
                <tr className="package-name-holder">
                    <th className="text-uppercase text-center">{packageDetail.name}</th>
                </tr>
            </MDBTableHead>
                <MDBTableBody>
                    <tr>
                    <th>{packageDetail.price} FCFA/AN</th>
                    </tr>
                    <tr>
                    <td>{packageDetail.space}</td>
                    </tr>
                    <tr>
                    <td>{packageDetail.bandwidth}</td>
                    </tr>
                    <tr>
                    <td>{packageDetail.domain}</td>
                    </tr>
               
                </MDBTableBody>
        </MDBTable>
        </Paper>
        </div>
        )}
        </Box>
        <style jsx>{`
            .package-name-holder {
                background: linear-gradient(90deg, rgba(65,176,212,1) 0%, rgba(113,201,219,1) 83%, rgba(0,212,255,1) 100%);
                color: #fff;
            }
        `}</style>
    </Box>
    );
}

欢迎任何解决方案，如果我问得不好，我们深表歉意。谢谢。

【问题讨论】：

因为您的函数应用于地图函数，它将影响所有元素。如果要将其应用于单个元素，则应使用其 id（如果有）指定它，或者如果它不是动态内容，我的意思是如果元素数量始终相同，则可以使用元素的索引
嗨@OnerT。非常感谢你。这是最好的解决方案，但我不知道采取的方法并使之成为可能。有什么提示吗？
能分享一下packageDetails数组的成分吗？它在数据库中的内容是什么？你在使用 MongoDB 或 SQL 或任何 API、服务吗？
@OnerT。我无法添加 packageDetails 的内容，因为该站点抱怨代码过多。 packageDetails 是同一文件中的对象数组。
ok，只分享数组中前两个或三个对象的代码

标签： javascript arrays reactjs for-loop next.js

【解决方案1】：

您应该依赖 packageDetails 数组中的数据。因此，如果您想在第一个元素上使用鼠标效果，请仅使用以下内容：

<Paper
  elevation={elevation}
  className="single-table"
  onMouseEnter={index === 0 ? () => setElevation(prevElevation => 5) : () => {}}
  onMouseLeave={index === 0 ? () => setElevation(prevElevation => 2) : () => {}}
>

这只是一个未优化的代码，例如使用来自lodash 包的noop 而不是() => {}

【讨论】：

嗨@lazy.lizard，谢谢，但我希望每次悬停时都将悬停效果应用于一个元素。我有4个元素。当前行为不是对一个元素产生影响，而是对所有 4 个元素产生影响。
把index 写成setElevation(index) 并在Paper 中使用elevation={index === elevation ? 1 : 0}。不要忘记在鼠标离开时使用null 值清除它，并将默认高度值设置为null 也像useState(null)
嗨@lazy.lizard 是的，我需要一个解释。谢谢。
我有 elements=[1,2,3,4]，我只想在光标悬停在该元素上时对每个元素应用阴影效果。当前的行为是，当我将鼠标悬停在单个元素上时，它会将我想要的阴影应用于所有元素，而不仅仅是我应该悬停的那个。
所以当你悬停单个元素时，所有元素都必须提升（悬停），对吧？