Перенесите перетаскиваемый элемент div на передний план в React.js, когда пользователь нажимает на него. ⇐ CSS

[Гость]

Я хочу, чтобы перетаскиваемый блок выводился на передний план, когда я нажимаю на него или перетаскиваю.

Я не знаю заранее максимальное количество таких полей, поскольку у меня есть кнопка, которая создает новое перетаскиваемое поле, когда пользователь нажимает на кнопку.

Кнопка всегда должна находиться сверху, независимо от количества ячеек, поэтому ее z-индекс всегда должен быть наибольшим.

Итак, вот мои проблемы:
[*]Как вывести поле на передний план, когда пользователь нажимает на него. [*]Как сделать так, чтобы кнопка оставалась спереди.
И я новичок в ReactJS.

Вот что у меня сейчас есть в MyComponent.js

import React, { useState } из 'react'; импортировать Draggable из «реагировать-перетаскивать»; функция МойКомпонент() { const [currZIndex, setZIndex] = useState(0); const BringForward = () => { setZIndex(currZIndex + 1); } возвращаться ( ); } Проблема моей текущей реализации заключается в том, что каждый компонент знает только свой собственный z-индекс, но не знает, какой на данный момент самый высокий z-индекс. А z-индекс увеличивается всякий раз, когда я нажимаю на любой элемент div, поэтому z-индексы становятся неоправданно большими.

Если z-индекс div1 равен 6, а z-индекс div2 равен 2, мне нужно щелкнуть div2 5 раз, чтобы его z-индекс стал равным 7, чтобы вывести div2 на передний план.

Я до сих пор не придумал, как быть с z-индексом кнопки.

Кстати, это то, что у меня есть в App.js
import React, { useState } из 'react'; импортировать MyComponent из './MyComponent'; функция Приложение() { const [список компонентов, setComponentList] = useState([]); функция addNewComponent() { setComponentList(comComponentList.concat()); } возвращаться ( Новый компонент {список компонентов} ); }