为反应对象动态添加类（拖动时）

Question

我想将拖动的对象保留在其他对象的顶部。

那么，

我有CSS

basic.module.css

.dragging-shelf {
  z-index:100;
}

然后在函数中

import styles from "../css/basic.module.css";

const [isDragging, setIsDragging] = useState(false)
const handleStart = (e,data) =>{
    console.log("drag before:",data.node.classList);
    data.node.classList.add("dragging-shelf");
    console.log("drag after:",data.node.classList); 
    setIsDragging(true);
}
const handleStop = (e,data) =>{
    console.log("drag handle stop e:",e);
    console.log("drag handle stop data::",data);
    data.node.classList.remove("dragging-shelf");
    setIsDragging(false);
}

 return <Draggable onStart={handleStart} onDrag={handleDrag} onStop={handleStop}>   
         <div className='handle'>
          <MyObj></MyObj></div>
         </Draggable>

我可以确认

dragging-shelf

已添加到

data.node.classList

和

console.log

。

但是这并没有反映在浏览器上。

我拖动的对象位于另一个对象后面。

Answer 1

在

ReactJS

中，每当您想动态创建类列表时，都可以使用

clsx

或

classnames

等库。

正如 Vayne 在上面的评论中提到的，在您的情况下，您可以创建一个布尔值 useState 来存储您的拖动状态，然后将其作为条件传递到

clsx

或

classnames

中。由于重新渲染，您的组件始终具有预期的类。

示例：

import clsx from 'clsx';
import styles from '../css/basic.module.css';

function DragComponnets() {
  const [isDragging, setIsDragging] = useState(false)

  const handleStart = (e,data) => {
    setIsDragging(true);
  }
  const handleStop = (e,data) => {
    setIsDragging(false);
  }

  return (
    <Draggable onStart={handleStart} onDrag={handleDrag} onStop={handleStop}>   
      <div className={clsx('handle', {
        'dragging-shelf': isDragging
      )}>
          <MyObj></MyObj>
      </div>
    </Draggable>
  )
}

我希望这可以解决您的问题。

Answer 2

当调用

setIsDragging

导致重新渲染时，强制切换的 css 类可能会被删除。以声明方式设置类：

...
return (
  <Draggable className={isDragging ? 'dragging-shelf' : ''} ...>   
    ...
  </Draggable>
)