refactor: remove bind

src/ViewerCanvas.tsx

@@ -38,12 +38,6 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
       mouseX: 0,
       mouseY: 0,
     };
-
-    this.handleMouseScroll = this.handleMouseScroll.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.bindEvent = this.bindEvent.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
   }
 
   componentDidMount() {
@@ -61,7 +55,7 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     this.handleMouseDown(e);
   }
 
-  handleMouseDown(e) {
+  handleMouseDown = (e) => {
     if (!this.props.visible || !this.props.drag) {
       return;
     }
@@ -74,7 +68,7 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     });
   }
 
-  handleMouseMove(e) {
+  handleMouseMove = (e) => {
     if (this.state.isMouseDown) {
       let diffX = e.clientX - this.state.mouseX;
       let diffY = e.clientY - this.state.mouseY;
@@ -86,13 +80,13 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     }
   }
 
-  handleMouseUp(e) {
+  handleMouseUp = (e) => {
     this.setState({
       isMouseDown: false,
     });
   }
 
-  handleMouseScroll(e) {
+  handleMouseScroll = (e) => {
     e.preventDefault();
     let direct: 0 | 1 | -1 = 0;
     if (e.wheelDelta) {
@@ -112,7 +106,7 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     }
   }
 
-  bindEvent(remove?: boolean) {
+  bindEvent = (remove?: boolean) => {
     let funcName = 'addEventListener';
     if (remove) {
       funcName = 'removeEventListener';

src/ViewerCore.tsx

@@ -71,17 +71,6 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       loading: false,
     };
 
-    this.handleChangeImg = this.handleChangeImg.bind(this);
-    this.handleChangeImgState = this.handleChangeImgState.bind(this);
-    this.handleAction = this.handleAction.bind(this);
-    this.handleResize = this.handleResize.bind(this);
-    this.handleZoom = this.handleZoom.bind(this);
-    this.handleRotate = this.handleRotate.bind(this);
-    this.handleKeydown = this.handleKeydown.bind(this);
-    this.handleScaleX = this.handleScaleX.bind(this);
-    this.handleScaleY = this.handleScaleY.bind(this);
-    this.getImageCenterXY = this.getImageCenterXY.bind(this);
-
     this.setContainerWidthHeight();
     this.footerHeight = 84;
   }
@@ -95,7 +84,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     }
   }
 
-  handleClose(e) {
+  handleClose = (e) => {
     this.props.onClose();
   }
 
@@ -211,7 +200,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     };
   }
 
-  handleChangeImg(newIndex: number) {
+  handleChangeImg = (newIndex: number) => {
     // let imgCenterXY2 = this.getImageCenterXY();
     // this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
     // setTimeout(() => {
@@ -220,7 +209,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     this.loadImg(newIndex);
   }
 
-  handleChangeImgState(width, height, top, left) {
+  handleChangeImgState = (width, height, top, left) => {
     this.setState({
       width: width,
       height: height,
@@ -272,7 +261,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     }
   }
 
-  handleAction(config: ToolbarConfig) {
+  handleAction = (config: ToolbarConfig) => {
     this.handleDefaultAction(config.actionType);
 
     if (config.onClick) {
@@ -288,19 +277,19 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     }
   };
 
-  handleScaleX(newScale: 1 | -1) {
+  handleScaleX = (newScale: 1 | -1) => {
     this.setState({
       scaleX: this.state.scaleX * newScale,
     });
   }
 
-  handleScaleY(newScale: 1 | -1) {
+  handleScaleY = (newScale: 1 | -1) => {
     this.setState({
       scaleY: this.state.scaleY * newScale,
     });
   }
 
-  handleZoom(targetX, targetY, direct, scale) {
+  handleZoom = (targetX, targetY, direct, scale) => {
     let imgCenterXY = this.getImageCenterXY();
     let diffX = targetX - imgCenterXY.x;
     let diffY = targetY - imgCenterXY.y;
@@ -347,20 +336,20 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     });
   }
 
-  getImageCenterXY() {
+  getImageCenterXY = () => {
     return {
       x: this.state.left + this.state.width / 2,
       y: this.state.top + this.state.height / 2,
     };
   }
 
-  handleRotate(isRight: boolean = false) {
+  handleRotate = (isRight: boolean = false) => {
     this.setState({
       rotate: this.state.rotate + 90 * (isRight ? 1 : -1),
     });
   }
 
-  handleResize() {
+  handleResize = () => {
     this.setContainerWidthHeight();
     if (this.props.visible) {
       const [width, height] = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight);
@@ -378,7 +367,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     }
   }
 
-  handleKeydown(e) {
+  handleKeydown = (e) => {
     let keyCode = e.keyCode || e.which || e.charCode;
     let isFeatrue = false;
     switch (keyCode) {
@@ -543,7 +532,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         {this.props.noClose || (
           <div
             className={`${this.prefixCls}-close ${this.prefixCls}-btn`}
-            onClick={this.handleClose.bind(this)}
+            onClick={this.handleClose}
             style={{ zIndex: zIndex + 10 }}
           >
             <Icon type={ActionType.close} />

src/ViewerNav.tsx

@@ -13,7 +13,7 @@ export default class ViewerNav extends React.Component<ViewerNavProps, any> {
     activeIndex: 0,
   };
 
-  handleChangeImg(newIndex) {
+  handleChangeImg = (newIndex) => {
     if (this.props.activeIndex === newIndex) {
       return;
     }
@@ -33,7 +33,7 @@ export default class ViewerNav extends React.Component<ViewerNavProps, any> {
             <li
             key={index}
             className={index === this.props.activeIndex ? 'active' : ''}
-            onClick={this.handleChangeImg.bind(this, index)}
+            onClick={() => { this.handleChangeImg(index); }}
             >
               <img src={item.src} alt={item.alt} />
             </li>