小编lil*_*ing的帖子

我想在单击或拖动它时将一个可拖动的框带到前面。

我事先不知道此类框的最大数量，因为我有一个按钮，当用户单击该按钮时，该按钮会创建一个新的可拖动框。

无论有多少个框，按钮都应该始终位于顶部，因此它的 z-index 应始终是最大的。

所以这些是我的问题：

1. 当用户单击某个框时，如何将其置于最前面。
2. 如何让按钮保持在前面。

我是 ReactJS 的新手。

这是我目前在 MyComponent.js 中拥有的内容

import React, { useState }  from 'react';
import Draggable from 'react-draggable';

function MyComponent() {
    const [currZIndex, setZIndex] = useState(0);

    const bringForward = () => {
        setZIndex(currZIndex + 1);
    }

    return (
        <Draggable onMouseDown={bringForward}>
            <div className="mydiv" style={{zIndex: currZIndex}}></div>
        </Draggable>
    );
}

我当前实现的问题是每个组件只知道自己的 z-index，但不知道当前最高的 z-index 是多少。每当我单击任何 div 时，z 索引就会增加，因此这使得 z 索引不必要地变大。

如果 div1 的 z-index 为 6，div2 的 z-index 为 2，我必须单击 div2 5 次，使其 z-index 变为 7，才能将 div2 …