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

在第一个this.state.highestIndex语句中，您似乎总是将zIndex和当前目标的if()设置为相同。因此，else if()语句运行时始终为false。

请参阅下面的注释代码。

    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;
  }
}

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

1 个答案: