javascript - 在 React 的 .map 迭代中对单个元素使用 onMouseEnter
问题描述
我试图在从 .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>
);
}
如果我问得不好,任何解决方案都是受欢迎的和抱歉的。谢谢。
解决方案
您应该依赖packageDetails
数组中的数据。因此,如果您想在第一个元素上使用鼠标效果,请仅使用以下内容:
<Paper
elevation={elevation}
className="single-table"
onMouseEnter={index === 0 ? () => setElevation(prevElevation => 5) : () => {}}
onMouseLeave={index === 0 ? () => setElevation(prevElevation => 2) : () => {}}
>
这只是一个未优化的代码,例如使用noop
from lodash
package 而不是() => {}
推荐阅读
- javascript - 如何将新创建的用户重定向到他们的“登录”主页?
- loops - 你能在 AutoIt 中循环一个 CMD ping
- r - 在输入函数中使用 is.na 时,Reduce 函数返回错误的逻辑输出
- r - 密码控制后启动 flexdashboard
- python - python3.x 的 pyvisa 是否需要在 SCPI 中与实验室仪器进行通信?
- php - php导入包含多个相互调用的函数
- .net-core - healthchecks-ui windows 身份验证.net core 3.1
- php - 为什么我的 Eloquent where() 子句在删除时会破坏我的查询?
- c++ - 如何影响可执行文件或库的源目录?
- android - Jetpack Compose Text 超链接部分文本