javascript - 如何使用光标：使用 event.preventDefault() 复制？

Question

我想在我的 dropzone 上添加一个光标：复制，但我也使用 event.preventDefault() 在我删除文件时解除该行为，它正在浏览器中打开。
我的反应代码片段：

const handleDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
    event.preventDefault();
    event.stopPropagation();
    console.log("Drag Over")
};`

以及渲染的实现：

return(<div
    id="drop-area"
    ref={this.dropRef}
    className= 'checklist-pane--is-dragging'
    onDragEnter={handleDragEnter}
    onDragLeave={handleDragLeave}
    onDragOver={handleDragOver}
    onDrop={handleDrop}
>)

的CSS：

&--is-dragging {
    border-color: $color-primary;
    background: rgba($color-primary, 0.2);
    cursor: copy;
}

标签： javascriptreactjsdom

Answer 1

您可以在 dragEnter 上的组件状态中设置一个布尔值，这意味着您当前正在悬停一个元素并将该布尔值设置为 false onDragLeave

class YourComp extends React.Component {

   state = {
      isDragging: false,
   }

   handleDragEnter = (event) => {
      ...
      this.setState({ isDragging: true });
   }

   handleDragLeave = (event) => {
       this.setState({ isDragging: false });
   }



   render() {
      const { isDragging } = this.state;
      const className = isDragging ? checklist-pane--is-dragging' : '';
      return (<div
                    id="drop-area"
                    ref={this.dropRef}
                    className={className}
                    onDragEnter={this.handleDragEnter}
                    onDragLeave={this.handleDragLeave}
                    onDragOver={handleDragOver}
                    onDrop={handleDrop}
                >);
   }
}