OnMouseLeave 事件仅在鼠标指针离开父元素后触发答案

【问题标题】：OnMouseLeave Event only firing after the mouse pointer leaves parent elementOnMouseLeave 事件仅在鼠标指针离开父元素后触发
【发布时间】：2023-02-24 09:50:35
【问题描述】：

我有一个带有 OnMouseEnter() 的 div 元素更改其类和一个 OnMouseLeave() 恢复其类，onMouseLeave() 仅在鼠标指针离开元素的父 div 后才有效。

这里的工作示例 - https://codesandbox.io/s/old-violet-7ipbvb?file=/src/Grid.jsx&resolutionWidth=320&resolutionHeight=675

更多细节 - 基本上我有一个父 div（称为画布），里面有子 div（单元格）来表示一个矩阵，子 div 在鼠标进入时改变颜色并在鼠标离开时恢复到原始颜色，问题是单元格改变颜色鼠标进入但仅在指针离开其父 div 时恢复颜色。

 const [canvas, setcanvas] = useState([[]]);
 const handleenter1 = (row, col) => {
       const a = []
       for (var i = 0; i<50; i++){
        a.push([]);
         for (var j=0; j<20; j++){
           if (i=== row && j === col){
              var obj = {x: i, y: j,  status: "wall"};
              a[i].push(obj);
           }
           else {
               obj = canvas[i][j];
              a[i].push(obj);
           }
       
        }
     }
     setcanvas(a);  
}
const handleleave1 = (row, col ) => {}
const create =  () => {
    let a = [];
 for (var i = 0; i<50; i++){
    a.push([]);
     for (var j=0; j<20; j++){
      if (i === 10 && j === 10){
         var obj = {x: i, y: j,  status: "starter"};
        a[i].push(obj);
      }
      else {
          obj = {x: i, y: j, status: "space"};
        a[i].push(obj);
      }
        
    }
 }
 setcanvas(a);

 }
 useEffect(create, []);
 
    
    const m = canvas.map((objlist,index1)=> {
        return (objlist.map((obj,index) => {
         
            return (
            <div key = {`${index1} ${index}`} 
                 onMouseEnter ={()=> {handleenter1(obj.x,obj.y)}}
                 onMouseLeave = {()=> { handleleave1(obj.x ,obj.y) }}>
            </div>);
        }));
    
    });

【问题讨论】：

标签： reactjs mouseevent

【解决方案1】：

问题是 handleentter1 和 handleleave1 函数之间的竞争条件，其中 mouseleave 没有及时看到更新的 canvas，这就是它错误地将前一个单元格保持为黑色的原因。

如果重构函数以强制更新已知行/列的画布状态，则不会遇到此问题。现在 setcanvas 不会发生冲突，因为它只是设置它关心的一个单元格而不是所有其他单元格。

这是working sandbox：

const handleenter1 = (row, col) => {
  setcanvas((c) => {
    const p = [...c];
    p[row][col].status = "wall";
    return p;
  });
};

const handleleave1 = (row, col) => {
  setcanvas((c) => {
    const p = [...c];
    p[row][col].status = "space";
    return p;
  });
};

【讨论】：