react列表元素hover

常见的列表元素hover，我们使用的方式是，在获得原始数组对象的时候加一个标识符，然后mouseIn 的时候改变状态，mouseOut的时候恢复状态；

一、举例演示

const arr = [{name:'123',age:13,sex:'man'},{name:'125',age:13,sex:'man'},{name:'124',age:13,sex:'man'}]

(1)添加标识

const arr = [{name:'123',age:13,sex:'man',show:false},{name:'125',age:13,sex:'man',show:false},{name:'124',age:13,sex:'man',show:false}]

(2)hover某个元素时候改变状态（例如第一个）

const arr = [{name:'123',age:13,sex:'man',show:true},{name:'125',age:13,sex:'man',show:false},{name:'124',age:13,sex:'man',show:false}]

(3)hover离开元素的时候，恢复状态；

const arr = [{name:'123',age:13,sex:'man',show:false},{name:'125',age:13,sex:'man',show:false},{name:'124',age:13,sex:'man',show:false}]

二、react演示

鼠标进入离开

    list.map((item, index) => (<divclassName="normal"key={index}onMouseEnter={() => {handleMouseEnter(item.index);}}onMouseLeave={() => {handleMouseLeave(item.index);}}>{item.name}</div>));

js进行数据操作

  import { useState,useCallback } from 'react';const [list, setList] = useState([]);setList( [{name:'123',age:13,sex:'man',show:false},{name:'125',age:13,sex:'man',show:false},{name:'124',age:13,sex:'man',show:false}]);// 因为是要修改useState处理后的值，所有需要使用useCallback来处理，其他要进行一次浅拷贝const handleMouseEnter = useCallback((index) => {const copy = list.concat();const target = list[index];target.show = true;copy[index] = target;setList(copy);},[list]);
// 因为是要修改useState处理后的值，所有需要使用useCallback来处理，其他要进行一次浅拷贝const handleMouseLeave = useCallback((index) => {const copy = list.concat();const target = list[index];target.show = false;copy[index] = target;setList(copy);},[list]);

react列表元素hover相关推荐

html的ol和ul和li,HTML 列表元素OL、UL、LI
HTML 列表元素OL.UL.LI 称为有序清单标记.定义一个有序列表,其中可以包含一个或者多个标记来定义实际的列表项. 称为无序清单标记.定义一个无序列表,同样可以包含一个或者多个标记来定义实际 ...
html更改无序列表的图标,你可以在无序列表中为每个列表元素使用不同的图标图像吗？...
我不是CSS的高级用户,但我有一个体面的工作知识,我想.我试着做一个无序列表,为每个列表元素使用不同的图标.我还想在悬停时更改列表元素的背景颜色.你可以在无序列表中为每个列表元素使用不同的图标图像吗? ...
Redis 笔记（04）— list类型（作为消息队列使用、在列表头部添加元素、尾部删除元素、查看列表长度、遍历指定列表区间元素、获取指定区间列表元素、阻塞式获取列表元素）
Redis 的列表是链表而不是数组.这意味着 list 的插入和删除操作非常快,时间复杂度为 O(1),但是索引定位很慢,时间复杂度为 O(n). 当列表弹出了最后一个元素之后,该数据结构自动被删除, ...
python列表元素交换位置_python删除列表元素5种方法，你会的是错误法还是最优解？...
删除列表元素很多同学想当然的认为不就是循环遍历加上if判断再del吗?真的有这么简单吗? 还是直接上代码看案例吧: import time# 删除下面列表中所有张姓元素,输出的结果应该是['李老大', ...
python输出结果空格分割_python 输出列表元素实例(以空格/逗号为分隔符)
给定list,如何以空格/逗号等符号以分隔符输出呢? 一般的,简单的for循环可以打印出list的内容: l=[1,2,3,4] for i in l: print(i) 输出结果一行一个元素: 1 ...
R语言rep函数重复向量或者列表元素实战
R语言rep函数重复向量或者列表元素实战目录 R语言rep函数重复向量或者列表元素实战 #基本语法 #仿真数据
display:inline-block+text-align:justify实现列表元素的两端对齐
display:inline-block+text-align:justify实现列表元素的两端对齐. 2011-09-21 08:49:22 display:inline-block+text-al ...
python中怎么比较两个列表-Python两个列表元素比较
Python两个列表元素的对比经常遇到,如何正确的比较? 知识点:列表解析. 详解: 列表解析 List Comprehensions 表达式:[expression for iter_val in ...
python find函数和index的区别_【全网最简单Python教程】--10.列表元素的索引和返回索引值（Index函数使用）...
在练习日4中,小鱼给大家讲述了神秘的ASCII码编译及解密过程. 在ASCII码中,字符与十进制数字的互相转换是通过 ord()函数和chr()函数. 今天小鱼要给大家介绍另一种在影视剧.侦探小说中更 ...

react列表元素hover

一、举例演示

二、react演示

react列表元素hover相关推荐

最新文章

热门文章