Как подключить прослушиватели событий Drag & Drop к компоненту React

Я создаю компонент, который позволяет перетаскивать локальные файлы на div. Тогда есть вывод информации о удаленном файле.

Моя проблема в том, что я не знаю, как правильно подключить слушателей событийdrop а такжеdragover при создании моего компонента.

Мой компонент приложения - это то, где вся моя логика (обработчик для перетаскивания и перетаскивания), и я создал отдельный компонент, куда будут сбрасываться файлы - компонент dropZone.

Я попытался поместить прослушиватель событий в тег dropZone на моем компоненте приложения с помощьюcomponentDidMount где, если мой компонент dropZone был обработан, поместите слушатель события в него:

componentDidMount(){
      const dropZone = document.getElementById('dropZone');
      dropZone.addEventListener('dragover', this.allowDrop.bind(this))
      dropZone.addEventListener('drop', this.dropHandler.bind(this))
    } 

это не сработало

Затем я попытался поместить его в свой тег dropZone, который живет в моем компоненте приложения:

<DropZone dropZone = {"dropZone"} onDragOver = {this.allowDrop.bind(this)} 
 onDrop ={this.dropHandler.bind(this)} >      
</DropZone>

это не добавляло слушателя события в dropZone. Я пробовал пару других вещей, но это те, которые я должен был сработать.

Так что мои вопросы

как мне добавитьdrop а такжеdragover Слушатели событий в dropZone?

Должен ли я добавлять эти прослушиватели событий в приложение и передавать их компоненту dropZone в качестве поддержки? Или нет передачи даже необходимо

Или я должен добавлять прослушиватели событий непосредственно в dropZone, чтобы мои функции обработчика событий находились в компоненте dropZone?

Ответы на вопрос(1)

Решение Вопроса

Вам не нужно использовать реквизит. Вы можете просто добавить все события в свой компонент DropZone.

http://codepen.io/jzmmm/pen/bZjzxN?editors=0011

Здесь я добавляю события:

  componentDidMount() {
    window.addEventListener('mouseup', this._onDragLeave);
    window.addEventListener('dragenter', this._onDragEnter);
    window.addEventListener('dragover', this._onDragOver);
    window.addEventListener('drop', this._onDrop);
    document.getElementById('dragbox').addEventListener('dragleave', this._onDragLeave);
  }

Ваш метод рендеринга:

  render() {
    return (
      <div>
        {this.props.children}
        <div id="dragbox" className={this.state.className}>
          Drop a file to Upload
        </div>
      </div>
    );
  }

Как вы можете видеть в componentDidMount, я также добавил обработчик событий в #dragbox. Потому что, как только вы перетаскиваете файл на страницу, #dragbox находится под курсором мыши, поэтому он нуждается в перетаскивании на тот случай, если вы решите, что вы не хотите бросать туда файл.

Также,dragover необходимо захватитьdrop

Тогда в моем компоненте приложения я могу использовать его так:

class App extends React.Component {
  render() {
    return (
      <DropZone>
        <div>
          <h1>Drag A File Here...</h1>
        </div>
      </DropZone>
    );
  }
}
 Carol Gonzalez01 авг. 2016 г., 07:25
Спасибо JZM! Я также решил свою проблему, добавив прослушиватели событий в div в компоненте dropZone и использовал слова React eventListener.onDrop а такжеonDragOver -< div id= {this.props.dropZone} onDragOver ={this.allowDrop.bind(this)} onDrop = {this.dropHandler.bind(this)}></div> но мне больше нравится ваш ответ, потому что я вижу, как eventListeners присоединяются в методе жизненного цикла. Я также узнал, что функции для eventListeners должны быть в компоненте dropZone, так что это было здорово. Ваш ответ действительно ясен и понятен!

Ваш ответ на вопрос