Question

要更新幻灯片计数，我正在使用https://github.com/bokuweb/react-rnd进行拖放交互。我以参考为例，幻灯片的移动到达一定距离后调用一个方法。问题在于，到达该距离后，该事件被多次调用，因此计数一直保持非常快的速度。

https://codesandbox.io/s/drag-drop-react-rnd-cm8x3上的完整演示

我尝试禁用拖放，但是计数器增加得如此之快，以至于没有时间停止它。我也尝试过将位置设置为开头，但似乎仅在用户释放点击（或手指）时才会更新。我也尝试过设置一个很小的距离，但是不起作用，因为如果您加快速度，它将无法计算，或者如果您降低速度，计数将保持快速增长。

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};


dragin = (_e: MouseEvent, data: DraggableData ) => {
    // @TODO: It should return to the starting position with the previous step
    if (400 < data.x && data.x < 410) {
        this.prevStep();
    }

    console.log(data.x);
    // @TODO: It should return to the starting position with the next step
    if (745 < data.x) {
        // Needs to return to beginning!!!!
        this.setState({
            xPosition: 0,
            yPosition: 0
        });
        // The code keeps executing a lot of times.
        // Maybe create a variable that stores only the first time it hits
        // or how can it be controlled?
        console.log('next Step');
        this.nextStep();
    }
};

有关代码的演示，请访问https://codesandbox.io/s/drag-drop-react-rnd-cm8x3

向右移动时，幻灯片应该消失，然后下一个幻灯片出现在初始位置。

Answer 1

最后找到了一种解决方法。使用项目作为状态并更新它不是一个好主意，因为如前所述，当达到条件时，它会更新并更新，直到拖动停止为止。为了避免最好将项目数组用作状态，一旦达到条件，请使用pop或shift键将项目从数组中删除。

SQL> with data as (
  2  SELECT 1 AS id, 232 AS status, to_date('21.08.2019 10:47:39','dd.mm.yyyy hh24:mi:ss') AS start_dte, to_date('25.08.2019 0:19:37','dd.mm.yyyy hh24:mi:ss') AS end_dte FROM dual UNION ALL
  3  SELECT 1 AS id, 235 AS status, to_date('25.08.2019 19:11:00','dd.mm.yyyy hh24:mi:ss') AS start_dte, to_date('27.08.2019 0:25:11','dd.mm.yyyy hh24:mi:ss') AS end_dte FROM dual UNION ALL
  4  SELECT 1 AS id, 233 AS status, to_date('27.08.2019 19:11:00','dd.mm.yyyy hh24:mi:ss') AS start_dte, to_date('31.12.2999 23:59:59','dd.mm.yyyy hh24:mi:ss') AS end_dte FROM dual UNION ALL
  5  SELECT 2 AS id, 301 AS status, to_date('20.08.2019 10:47:39','dd.mm.yyyy hh24:mi:ss') AS start_dte, to_date('23.08.2019 0:19:37','dd.mm.yyyy hh24:mi:ss') AS end_dte FROM dual UNION ALL
  6  SELECT 2 AS id, 264 AS status, to_date('23.08.2019 19:11:00','dd.mm.yyyy hh24:mi:ss') AS start_dte, to_date('26.08.2019 0:25:11','dd.mm.yyyy hh24:mi:ss') AS end_dte FROM dual UNION ALL
  7  SELECT 2 AS id, 259 AS status, to_date('26.08.2019 19:11:00','dd.mm.yyyy hh24:mi:ss') AS start_dte, to_date('31.12.2999 23:59:59','dd.mm.yyyy hh24:mi:ss') AS end_dte FROM dual)
  8  ,D AS (select ID, STATUS, TRUNC(start_dte) AS start_dte, TRUNC(end_dte) AS end_dte from data)
  9  SELECT
 10      ID,
 11      STATUS,
 12      START_DTE
 13  FROM
 14      (
 15          SELECT DISTINCT
 16              ID,
 17              STATUS,
 18              START_DTE + LEVEL - 1 AS START_DTE,
 19              END_DTE
 20          FROM
 21              D
 22          CONNECT BY
 23              LEVEL <= TRUNC(CASE
 24                  WHEN END_DTE = DATE '2999-12-31' THEN START_DTE + 1
 25                  ELSE END_DTE
 26              END) - START_DTE + 1
 27      )
 28  WHERE
 29      START_DTE != END_DTE
 30  ORDER BY
 31      ID,
 32      START_DTE
 33  ;

        ID     STATUS START_DTE
---------- ---------- ---------
         1        232 21-AUG-19
         1        232 22-AUG-19
         1        232 23-AUG-19
         1        232 24-AUG-19
         1        235 25-AUG-19
         1        235 26-AUG-19
         1        233 27-AUG-19
         1        233 28-AUG-19
         2        301 20-AUG-19
         2        301 21-AUG-19
         2        301 22-AUG-19

        ID     STATUS START_DTE
---------- ---------- ---------
         2        264 23-AUG-19
         2        264 24-AUG-19
         2        264 25-AUG-19
         2        259 26-AUG-19
         2        259 27-AUG-19

16 rows selected.

SQL>

可以在以下位置找到有效的更新解决方案：https://codesandbox.io/s/drag-drop-react-draggable-6qi1j

拖放滑块更新计数太快

1 个答案: