Реагировать на dropzone - событие dragLeave, возникающее при перетаскивании файла через dropzone - PullRequest
Новая
       15

Реагировать на dropzone - событие dragLeave, возникающее при перетаскивании файла через dropzone

0 голосов
/ 08 января 2019

Я использую React Dropzone для загрузки файла 

<DropZone
            accept='.pdf,.pptx,.ppt,.docx,.doc,.xls,.xlsx,.xslx,.png,.xsl,.jpg,.jpeg,.gif,.zip'
            onDrop={ files => {
              this.handleFileDrop(files);
              this.dragLeaveHandler();
            } }
            onDragEnter={ this.dragOverHandler }
            onDragLeave={ this.dragLeaveHandler }
            multiple={ false }
            style={ { height: '100%' } }
          >

  dragOverHandler = () => {
    console.log('enter');
    this.setState({
      isDragOver: true,
    });
  };

  dragLeaveHandler = () => {
    console.log('exit');
    this.setState({
      isDragOver: false,
    });
  };

Когда файл перемещается над зоной перетаскивания, одновременно вызывается событие onDragLeave.

Должен ли я использовать некоторые другие события? Как я могу исправить эту проблему?

1 Ответ

0 голосов
/ 09 января 2019

Проблема, с которой вы сталкиваетесь, скорее всего, вызвана тем, что DOM-события dragEnter и dragLeave запутались вместо каких-либо недостатков в пакете react-dropzone. Некоторые элементы могут вызывать зависание над ними в определенных положениях, чтобы не регистрироваться как зависание над их родительским элементом. Например, в верхней части любой простой строки, отображаемой внутри отображаемого элемента block, есть тонкая полоска. Чаще всего это происходит внутри тега <p>.

Не видя детей, оказавшихся внутри вашей дропзоны, невозможно дать конкретное исправление. Как правило, вам придется возиться со стилем детей. Например, теги <p> не будут проблемой, если их размер установлен на 0 пикселей или они заменены тегами <span>. Оба варианта нарушат отображение детей, что, к сожалению, неизбежно.

Что касается использования других событий, вам не повезло. Компонент DropZone использует события DOM onDragEnter и onDragLeave HTML. Поэтому любое исправление, которое вы можете придумать, не исправит сам компонент.

В общем, это печальная проблема, с которой просто нужно разобраться. Самый простой способ справиться с этим - просто поместить не более одного фрагмента текста в зону сброса и установить его размер равным 0 пикселей с помощью css: height: 0px;. Обычные элементы <div> не будут вызывать проблем, поэтому вы можете создать сложную дропзону, используя их.

...