在 React 中使用 zindex 将 div 元素置于最前面

Question

我很难让它发挥作用。我从异步事件处理程序转到当前函数。目前最终发生的情况是，如果您选择父 div 中最后一个元素，它最终具有相同的 zIndex，但仍将另一个元素放在顶部。

我基本上是在尝试确保我的 if 语句确保我单击的元素最终具有最高的 zIndex。这是我的整个组件代码，主要看的函数是onStart。我把它弄得一团糟，希望有人能理解我想要完成的事情并帮助我：

import React, {Component} from 'react'
import Draggable from 'react-draggable'
import Router from 'next/router'


import {
  BrowserFrame, 
  DragHandle,
  BrowserContent 
} from './styles'

class DesktopBrowser extends Component {

  constructor(props) {
    super(props)
    this.state = {
      highestIndex: 0
    }
  }

  findHighestZIndex(elem) {

    let elems = document.getElementsByClassName(elem);


    let highest = 0;

    for (let i = 0; i < elems.length; i++) {
      let zindex =document.defaultView.getComputedStyle(elems[i],null)
      .getPropertyValue("z-index");

      if ((zindex > highest) && (zindex != 'auto')) {

        this.setState({
          highestIndex: zindex
        })

      }

    }




  }

  onStart(e) {

    this.findHighestZIndex("react-draggable")


    if(this.state.highestIndex >= 0) {
      console.log('greater than zero', this.state.highestIndex, e.currentTarget.style.zIndex)
      e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+1)
      this.setState({
        highestIndex: (+e.currentTarget.style.zIndex) + 1
      })
    } else if (this.state.highestIndex < e.currentTarget.style.zIndex) {
      console.log('lower')
      e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+2)
    } else {
      console.log('catch')
    }

    // if(this.state.highestIndex >= 0) {

    //   this.setState({
    //     highestIndex: (+this.state.highestIndex) + 1
    //   })

    //   e.currentTarget.style.zIndex = (+this.state.highestIndex) + 1
    //   console.log(e.currentTarget.style.zIndex)

    // } 


  }




  render() {
   return (
      <Draggable 
        bounds="body"
        handle=".drag-handle"
        onStart={this.onStart.bind(this)}
        defaultPosition={
          {
            x: Math.floor(Math.random() * Math.floor(document.getElementsByClassName('content')[0].offsetWidth - 1000)), 
            y: Math.floor(Math.random() * Math.floor(document.getElementsByClassName('content')[0].offsetHeight - 500)) 
          }
        }>
      <BrowserFrame>
        <DragHandle className="drag-handle" />
        <BrowserContent bg={this.props.content.image}>
          <button onClick={(e) => {
            e.preventDefault()
            Router.push(`/portfolio/${this.props.content.slug}`)
          }}>View</button>
        </BrowserContent>

      </BrowserFrame>
      </Draggable>
    )
  }
}

export default DesktopBrowser

Answer 1

您似乎总是在第一个if() 语句中将this.state.highestIndex 和当前目标的zIndex 设置为相同。所以当else if() 语句运行时，它总是错误的。

请参阅下面的注释代码。

    if(this.state.highestIndex >= 0) { // This is always going to be true!!
      console.log('greater than zero', this.state.highestIndex, e.currentTarget.style.zIndex)
      e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+1)// Now you're setting the zIndex of the current target to higher than this.state.highestIndex 
      this.setState({
        highestIndex: (+e.currentTarget.style.zIndex) + 1 // And now setting highestIndex to be identical to current target's zIndex.
      })
    } else if (this.state.highestIndex < e.currentTarget.style.zIndex) { // Now this will never be true because you set them equal in the first if block.
      console.log('lower')
      e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+2)
    } else {
      console.log('catch')
    }

你可能想要这样的东西（未经测试）

    if(this.state.highestIndex >= 0) { // This is always going to be true!!
      e.currentTarget.style.zIndex = this.state.highestIndex + 2 // Add 2
      this.setState({
        highestIndex: this.state.highestIndex++; // Increment highestIndex by 1.
      }) // Now current target has a zIndex 1 higher than the rest
    } else {
      console.log('catch')
    }

但实际上这也可能是一个糟糕的解决方案，因为最终 zIndex 可能会达到最大值，因此它将不再起作用。最好将所有元素 zIndex 设置为 1，然后将当前目标设置为更高的值。每次都重置它们。可能是这些方面的东西（删除你的函数以找到最高的 zIndex 和 setState 调用）。

onStart(e) {
  let elems = document.getElementsByClassName('react-draggable');
  for(let i = 0; i < elems.length; i++) {
    elems[i].style.zIndex = 1;
    e.currentTarget.style.zIndex = 2;
  }
}