当鼠标悬停在react-dnd reactjs中时，如何更改DragPreviewImage的样式？

问题描述

我想更改DragPreviewImage样式，例如：缩放，填充颜色，将鼠标悬停在DragTarget上时更改不透明度！

这是我的简短版本示例代码：

1。 DragPhoto组件：

import React from 'react'
import { useDrag,DragPreviewImage } from 'react-dnd'

type DraggablePhotoProps = {
  photoItem: any,datasource: string
}

export const DraggablePhoto = (props: DraggablePhotoProps) => {

  const [{isDragging},drag,preview] = useDrag({
    item: { type: props.datasource },isDragging: (monitor) => {
      console.log("Draggable Photo: isDragging" )
      return true
    },collect: monitor => ({
      isDragging: !!monitor.isDragging(),})
  })

  return (
    <>
      <DragPreviewImage connect={preview} src={props.photoItem['preview']} ref={previewRef} />
      <img src={props.photoItem['preview']}
        ref={drag}
        style={{opacity: isDragging ? 0 : 1}}
      />
    </>
  )

}

2。 DragTarget组件：

import React from 'react'
import { useDrop } from 'react-dnd'

export const CanvasContainer = (props) => {
  const [{ isOver,canDrop },drop] = useDrop({
    accept: "upload_photo",drop: () => {
      console.log('CanvasContainer drop')
    },canDrop: () => { return true },hover: (item,monitor) => {
      console.log('CanvasContainer hover')
    },collect: (monitor) => ({
      isOver: !!monitor.isOver(),canDrop: !!monitor.canDrop()
    })
  })

  return (
    <div ref={drop} style={{width: '100%',height: '100%'}}>
      { props.children}
    </div>
  )

})

将鼠标悬停在div标签上时如何更改DragPreviewImage的样式？

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）