修改this.setstate在节点丢失以后还会继续更新bug

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "eslintIntegration": true,
+  "stylelintIntegration": true,
+  "tabWidth": 4,
+  "singleQuote": true,
+  "semi": false
+}

dist/src/lib/dragger/index.js

@@ -24,6 +24,7 @@ var Dragger = /** @class */ (function (_super) {
     function Dragger(props) {
         var _this = _super.call(this, props) || this;
         _this.mQue = 0;
+        _this._ismounted = false;
         _this.state = {
             /** x轴位移，单位是px */
             x: _this.props.x || 0,
@@ -181,9 +182,11 @@ var Dragger = /** @class */ (function (_super) {
                 doc.removeEventListener('touchmove', _this.move);
                 doc.removeEventListener('touchend', _this.onDragEnd);
             }
-            _this.setState({
-                zIndex: 1
-            });
+            if (_this._ismounted) {
+                _this.setState({
+                    zIndex: 1
+                });
+            }
             _this.props.onDragEnd && _this.props.onDragEnd(event, _this.state.x, _this.state.y);
         };
         _this.onResizeStart = function (event) {
@@ -262,6 +265,12 @@ var Dragger = /** @class */ (function (_super) {
         _this.self = null;
         return _this;
     }
+    Dragger.prototype.componentDidMount = function () {
+        this._ismounted = true;
+    };
+    Dragger.prototype.componentWillUnmount = function () {
+        this._ismounted = false;
+    };
     Dragger.prototype.componentWillReceiveProps = function (nextProps) {
         /**
          * 外部props 改变的时候更新元素的内部位置

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragact",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A powerful draggable layout system",
   "main": "index.js",
   "scripts": {

src/lib/dragger/index.tsx

@@ -1,21 +1,29 @@
-import * as React from "react";
-import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds } from '../utils'
-import { DraggerProps } from './type';
+import * as React from 'react'
+import {
+    int,
+    innerHeight,
+    innerWidth,
+    outerHeight,
+    outerWidth,
+    parseBounds
+} from '../utils'
+import { DraggerProps } from './type'
 
 const doc = document
 
 export class Dragger extends React.Component<DraggerProps, {}> {
-    parent: any;
-    self: any;
-    Ref: any;
-    mQue: number = 0;
+    parent: any
+    self: any
+    Ref: any
+    mQue: number = 0
+    _ismounted: Boolean = false
 
     constructor(props: DraggerProps) {
         super(props)
         // this.move = this.move.bind(this)
         // this.onDragEnd = this.onDragEnd.bind(this)
-        this.parent = null;
-        this.self = null;
+        this.parent = null
+        this.self = null
     }
     /**
      * 初始变量设置
@@ -53,30 +61,34 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         lastH: 0
     }
 
-
-
     move = (event: any) => {
-
-        let { lastX, lastY } = this.state;
+        let { lastX, lastY } = this.state
         /*  event.client - this.state.origin 表示的是移动的距离,
         *   elX表示的是原来已经有的位移
         */
 
-        let deltaX, deltaY;
+        let deltaX, deltaY
         if (event.type.indexOf('mouse') >= 0) {
             deltaX = (event as MouseEvent).clientX - this.state.originX + lastX
             deltaY = (event as MouseEvent).clientY - this.state.originY + lastY
         } else {
-            deltaX = (event as TouchEvent).touches[0].clientX - this.state.originX + lastX
-            deltaY = (event as TouchEvent).touches[0].clientY - this.state.originY + lastY
+            deltaX =
+                (event as TouchEvent).touches[0].clientX -
+                this.state.originX +
+                lastX
+            deltaY =
+                (event as TouchEvent).touches[0].clientY -
+                this.state.originY +
+                lastY
         }
 
         const { bounds } = this.props
         if (bounds) {
             /**
-            * 如果用户指定一个边界，那么在这里处理
-            */
-            let NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
+             * 如果用户指定一个边界，那么在这里处理
+             */
+            let NewBounds =
+                typeof bounds !== 'string' ? parseBounds(bounds) : bounds
 
             /**
              * 网格式移动范围设定，永远移动 n 的倍数
@@ -90,12 +102,26 @@ export class Dragger extends React.Component<DraggerProps, {}> {
 
             if (this.props.bounds === 'parent') {
                 NewBounds = {
-                    left: int(this.parent.style.paddingLeft) + int(this.self.style.marginLeft) - this.self.offsetLeft,
-                    top: int(this.parent.style.paddingTop) + int(this.self.style.marginTop) - this.self.offsetTop,
-                    right: innerWidth(this.parent) - outerWidth(this.self) - this.self.offsetLeft +
-                        int(this.parent.style.paddingRight) - int(this.self.style.marginRight),
-                    bottom: innerHeight(this.parent) - outerHeight(this.self) - this.self.offsetTop +
-                        int(this.parent.style.paddingBottom) - int(this.self.style.marginBottom)
+                    left:
+                        int(this.parent.style.paddingLeft) +
+                        int(this.self.style.marginLeft) -
+                        this.self.offsetLeft,
+                    top:
+                        int(this.parent.style.paddingTop) +
+                        int(this.self.style.marginTop) -
+                        this.self.offsetTop,
+                    right:
+                        innerWidth(this.parent) -
+                        outerWidth(this.self) -
+                        this.self.offsetLeft +
+                        int(this.parent.style.paddingRight) -
+                        int(this.self.style.marginRight),
+                    bottom:
+                        innerHeight(this.parent) -
+                        outerHeight(this.self) -
+                        this.self.offsetTop +
+                        int(this.parent.style.paddingBottom) -
+                        int(this.self.style.marginBottom)
                 }
             }
 
@@ -103,31 +129,31 @@ export class Dragger extends React.Component<DraggerProps, {}> {
              * 保证不超出右边界和底部
              * keep element right and bot can not cross the bounds
              */
-            if (NewBounds !== 'parent') deltaX = Math.min(deltaX, NewBounds.right)
-            if (NewBounds !== 'parent') deltaY = Math.min(deltaY, NewBounds.bottom)
-
+            if (NewBounds !== 'parent')
+                deltaX = Math.min(deltaX, NewBounds.right)
+            if (NewBounds !== 'parent')
+                deltaY = Math.min(deltaY, NewBounds.bottom)
 
             /**
              * 保证不超出左边和上边
              * keep element left and top can not cross the bounds
              */
-            if (NewBounds !== 'parent') deltaX = Math.max(deltaX, NewBounds.left)
+            if (NewBounds !== 'parent')
+                deltaX = Math.max(deltaX, NewBounds.left)
             if (NewBounds !== 'parent') deltaY = Math.max(deltaY, NewBounds.top)
         }
 
-
         /**如果设置了x,y限制 */
         deltaX = this.props.allowX ? deltaX : 0
         deltaY = this.props.allowY ? deltaY : 0
 
-
         /**
-         * 调整手感 
+         * 调整手感
          * 无论是向上移动还是向下移动，全部都是根据重力中心
          * */
-        const height = (this.Ref as HTMLDivElement).getClientRects()[0].height;
-        const upNdown = this.state.y - deltaY;
-        const fixY = deltaY + (upNdown >= 0 ? 0 : height / 2);
+        const height = (this.Ref as HTMLDivElement).getClientRects()[0].height
+        const upNdown = this.state.y - deltaY
+        const fixY = deltaY + (upNdown >= 0 ? 0 : height / 2)
         /**移动时回调，用于外部控制 */
         if (this.props.onMove) this.props.onMove(event, deltaX, fixY)
 
@@ -141,11 +167,8 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
         doc.body.style.userSelect = 'none'
 
-
-
         // if (event.target.id !== 'dragact-handle') return
 
-
         /**
          * 把监听事件的回掉函数，绑定在document上
          * 当设置边界的时候，用户鼠标会离开元素的范围
@@ -153,19 +176,21 @@ export class Dragger extends React.Component<DraggerProps, {}> {
          * 如果绑定在元素上，则鼠标离开元素，就不会再被监听了
          */
         if (event.type.indexOf('mouse') >= 0) {
-            doc.addEventListener('mousemove', this.move);
-            doc.addEventListener('mouseup', this.onDragEnd);
+            doc.addEventListener('mousemove', this.move)
+            doc.addEventListener('mouseup', this.onDragEnd)
         } else {
             doc.addEventListener('touchmove', this.move)
             doc.addEventListener('touchend', this.onDragEnd)
         }
 
-        if (this.props.bounds === 'parent' &&
+        if (
+            this.props.bounds === 'parent' &&
             /**为了让 这段代码不会重复执行 */
-            (typeof this.parent === 'undefined' || this.parent === null)) {
+            (typeof this.parent === 'undefined' || this.parent === null)
+        ) {
             /**
              * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
-             * what we do here is 
+             * what we do here is
              * making sure that we still can retrieve our parent when user's mouse left this node.
              */
 
@@ -178,12 +203,10 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             this.self = event.currentTarget
         }
 
+        this.props.onDragStart &&
+            this.props.onDragStart(this.state.x, this.state.y)
 
-
-        this.props.onDragStart && this.props.onDragStart(this.state.x, this.state.y)
-
-
-        let originX, originY;
+        let originX, originY
         if (event.type.indexOf('mouse') >= 0) {
             originX = (event as MouseEvent).clientX
             originY = (event as MouseEvent).clientY
@@ -192,8 +215,6 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             originY = (event as TouchEvent).touches[0].clientY
         }
 
-
-
         this.setState({
             originX: originX,
             originY: originY,
@@ -217,25 +238,29 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             doc.removeEventListener('touchend', this.onDragEnd)
         }
 
-        this.setState({
-            zIndex: 1
-        })
+        if (this._ismounted) {
+            this.setState({
+                zIndex: 1
+            })
+        }
 
-        this.props.onDragEnd && this.props.onDragEnd(event, this.state.x, this.state.y)
+        this.props.onDragEnd &&
+            this.props.onDragEnd(event, this.state.x, this.state.y)
     }
 
     onResizeStart = (event: React.MouseEvent<HTMLSpanElement>) => {
         /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
-        doc.body.style.userSelect = 'none';
+        doc.body.style.userSelect = 'none'
 
-        doc.addEventListener('mouseup', this.onResizeEnd);
-        doc.addEventListener('mousemove', this.onResizing);
+        doc.addEventListener('mouseup', this.onResizeEnd)
+        doc.addEventListener('mousemove', this.onResizing)
 
-        let originX, originY;
+        let originX, originY
         originX = event.clientX
         originY = event.clientY
 
-        this.props.onResizeStart && this.props.onResizeStart(event, this.state.w, this.state.h);
+        this.props.onResizeStart &&
+            this.props.onResizeStart(event, this.state.w, this.state.h)
 
         this.setState({
             originX: originX,
@@ -244,40 +269,48 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             lastW: this.state.w,
             lastH: this.state.h
         })
-        event.stopPropagation();
+        event.stopPropagation()
     }
     onResizing = (event: any) => {
         /*  event.client - this.state.origin 表示的是移动的距离,
         *   elX表示的是原来已经有的位移
         */
 
-        let deltaX, deltaY;
+        let deltaX, deltaY
         if (event.type.indexOf('mouse') >= 0) {
             deltaX = (event as MouseEvent).clientX - this.state.originX
             deltaY = (event as MouseEvent).clientY - this.state.originY
         } else {
-            deltaX = (event as TouchEvent).touches[0].clientX - this.state.originX
-            deltaY = (event as TouchEvent).touches[0].clientY - this.state.originY
+            deltaX =
+                (event as TouchEvent).touches[0].clientX - this.state.originX
+            deltaY =
+                (event as TouchEvent).touches[0].clientY - this.state.originY
         }
         /**移动时回调，用于外部控制 */
 
-        this.props.onResizing && this.props.onResizing(event, this.state.w, this.state.h);
+        this.props.onResizing &&
+            this.props.onResizing(event, this.state.w, this.state.h)
 
         this.setState({
             w: deltaX + this.state.lastW,
             h: deltaY + this.state.lastH
         })
-
     }
     onResizeEnd = (event: any) => {
-        doc.body.style.userSelect = '';
+        doc.body.style.userSelect = ''
         doc.removeEventListener('mousemove', this.onResizing)
         doc.removeEventListener('mouseup', this.onResizeEnd)
 
-        this.props.onResizeEnd && this.props.onResizeEnd(event, this.state.w, this.state.h);
+        this.props.onResizeEnd &&
+            this.props.onResizeEnd(event, this.state.w, this.state.h)
     }
 
-
+    componentDidMount() {
+        this._ismounted = true
+    }
+    componentWillUnmount() {
+        this._ismounted = false
+    }
 
     componentWillReceiveProps(nextProps: DraggerProps) {
         /**
@@ -287,8 +320,10 @@ export class Dragger extends React.Component<DraggerProps, {}> {
          */
         const { isUserMove } = nextProps
         if (!isUserMove) {
-            if (typeof nextProps.x === 'number' &&
-                typeof nextProps.y === 'number') {
+            if (
+                typeof nextProps.x === 'number' &&
+                typeof nextProps.y === 'number'
+            ) {
                 this.setState({
                     y: nextProps.y,
                     x: nextProps.x,
@@ -302,13 +337,12 @@ export class Dragger extends React.Component<DraggerProps, {}> {
     }
 
     movePerFrame = (delt: number) => {
-
         this.setState({
             y: this.state.y + delt
         })
-        this.mQue++;
+        this.mQue++
         if (this.mQue >= 10) {
-            this.mQue = 0;
+            this.mQue = 0
             return
         }
         requestAnimationFrame(() => this.movePerFrame(delt))
@@ -320,36 +354,36 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             onTouchStart: this.onDragStart,
             onTouchEnd: this.onDragEnd,
             onMouseUp: this.onDragEnd
-        };
+        }
 
         var resizeMix = {
             onMouseDown: this.onResizeStart,
             onMouseUp: this.onResizeEnd
         }
         return {
-            dragMix, resizeMix
-        };
+            dragMix,
+            resizeMix
+        }
     }
 
     render() {
-
         var { x, y, w, h } = this.state
         var { style } = this.props
         if (!this.props.isUserMove) {
             /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
-            x = this.props.x ? this.props.x : 0;
-            y = this.props.y ? this.props.y : 0;
+            x = this.props.x ? this.props.x : 0
+            y = this.props.y ? this.props.y : 0
             if (style) {
-                w = style.width ? style.width : w;
-                h = style.height ? style.height : h;
+                w = style.width ? style.width : w
+                h = style.height ? style.height : h
             }
         }
         if (style) {
             //使得初始化的时候，不会有从0-1缩放动画
-            w = w === 0 ? style.width : w;
-            h = h === 0 ? style.height : h;
+            w = w === 0 ? style.width : w
+            h = h === 0 ? style.height : h
         }
-        const { dragMix, resizeMix } = this.mixin();
+        const { dragMix, resizeMix } = this.mixin()
 
         const provided = {
             style: {
@@ -357,12 +391,11 @@ export class Dragger extends React.Component<DraggerProps, {}> {
                 touchAction: 'none!important',
                 transform: `translate(${x}px,${y}px)`,
                 width: w,
-                height: h,
+                height: h
             },
-            ref: (node: any) => this.Ref = node
+            ref: (node: any) => (this.Ref = node)
         }
 
         return this.props.children(provided, dragMix, resizeMix)
     }
 }
-