Реагировать на Drag and Drop - onDrop не вызывается, если setState вызывается в onDragOver

Question

Я пытаюсь реализовать перетаскивание в реагировать, и если я вызываю setState в обработчике onDragOver (чтобы иметь возможность выполнять некоторые стили, основанные на состоянии перетаскивания), onDrop не будет вызываться во второй капле.Если я уберу вызов setState, он будет работать нормально.Что меня удивляет, так это то, что это работает с первого раза.Я ожидаю, что если это не сработает, то просто не сработает.

Примечание: я использую реакцию этого со стилизованными компонентами.

У меня есть следующий компонент на основе классов:

  state = {
    status: STATUS.NOT_DRAGGING,
  };

  onDragOver = (e) => {
    e.preventDefault();
    // this line is causing all the trouble
    // this.setState(() => ({ status: STATUS.DRAGGING }));
  };

  onDrop = (e, rowId) => {
    // get the item being dragged using dto
    const id = e.dataTransfer.getData('id');
    const name = e.dataTransfer.getData('name');

    // clear out the data transfer array
    e.dataTransfer.clearData();

    if (id === null || id === 'undefined') return;

    const node = { id, name };
    const settings = this.props.getPlotContainer(rowId).settings;

    // add node to plot
    this.props.addNodeToPlot(rowId, node, settings);

    this.setState({ status: STATUS.DROPPED });
  };

и мой сбрасываемый div:

      <MainContainer
        status={this.state.status}
        className="droppable"
        onDragOver={e => this.onDragOver(e)}
        onDrop={e => this.onDrop(e, rowId)}
      >
        {(plot && plot.nodes.length === 0) && <EmptyPlot status={this.state.status}>{message}</EmptyPlot>}
        {(plot && plot.nodes.length > 0) && this.renderPlotSettings(plot, rowId)}
        {(plot && plot.nodes.length > 0) && this.renderPlot(plot)}
        {(plot && plot.nodes.length > 0) && this.renderSeriesSettings(plot, rowId)}
      </MainContainer>

Любой совет или советы с благодарностью!

Answer 1

Я предоставляю свое решение на случай, если кто-то еще столкнется с этой проблемой.

Лучшая работа, которую я мог придумать, - это перенести настройку состояния перетаскивания из onDragOver перетаскиваемого элемента в события onDragStart и onDragEnd перетаскиваемого элемента. Поскольку эти элементы находятся в разных компонентах, я переместил состояние из компонента в избыточный.

Как примечание, я бы также избегал установки состояния или запуска действий в таких событиях, как onDrag, onDragOver и т. Д., Которые являются «непрерывными» в течение неизвестного периода времени.

Надеюсь, это поможет кому-то еще.