常見的列表元素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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。