react拖放 - 如果在ondragover上调用setstate，则未调用ondrop

Question

我正在尝试在react中实现拖放，如果我在ondragover处理程序中调用setState(能够根据阻力状态进行一些样式(，则不会称呼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 Events。由于这些元素在不同的组件中，因此我将状态从组件中移出到redux。

注意，我还将避免在未知的时间段内"连续"等事件中设置状态或开除诸如Ondrag，Ondragover等事件的行动。

希望这对别人有帮助。