Reactjs 如何更改React中组件的z索引？

我从Angela Yu的Udemy课程中选择了Keeper应用程序项目，并做了一些修改。以下是链接：

我希望能够在画布上移动笔记，虽然我能够做到这一点，但我在笔记的堆叠方面遇到了问题。我希望所选笔记位于所有其他笔记之上。我尝试通过创建一个名为noteRef的useRef并键入以下内容来修补z-index值：

noteRef.current.style.zIndex = 9999

在handleOnClick函数内部，在onMouseDown期间调用该函数。然而，它并没有真正起到任何作用。我试着用它然后打字

noteRef.current.style.zIndex = 1

在handleOnUp函数中，当我移动时，可以将选定的便笺放在其他便笺的上方，很明显，当我释放鼠标时，它正好回到便笺的下方

我也尝试过使用useEffect，但它也没有改变任何东西。我想知道是否有办法从应用程序组件（note组件所在的位置）访问功能。

** 这是我的示例代码沙盒

如何使用父组件中的状态管理notes`z索引

在下面的示例中，我在

App

组件中使用了

useState

，并创建了

stackNote

函数来处理子组件的样式

函数应用程序（）{
const[zIndex，setZindex]=useState（1）；
const stackNote=（ref）=>{
ref.current.style.zIndex=zIndex；
setZindex（（zIndex）=>zIndex+1）；
};
返回(
{notes.map（（noteItem）=>(
))}
);
}

然后，在

Note

组件中，用

noteRef

调用

stackNote

，点击

功能点击（e）{
e、 预防默认值（）；
道具.堆叠注释（注参考）；
offsetX=e.pageX-notePos.x；
offsetY=e.pageY-notePos.y；
log（“单击鼠标！”）；
文件。添加的列表器（“mousemove”，handleOnMove）；
文件。添加的列表（“鼠标”，handleUp）；
}

不要忘记应该删除以前的代码，比如
noteRef.current.style.zIndex=…

虽然
ref
存在于原始代码中，所以我按原样使用，但似乎没有必要使用它。
这很有效！谢谢这就是我想要的，能够将值传递回父组件。。。很好@NumpyNoob听到这个消息我很高兴：）