Как я могу использовать курсор: Копировать с помощью event.preventDefault ()?

Question

Я хочу добавить курсор: копировать в мою зону сброса, но я также использовал 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;
}

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