fix: autoComplete item panel, drag scrollbar error

Author: zangchuqiang

src/scrollbar/Bar.jsx

@@ -4,9 +4,13 @@ import { BAR_MAP, renderThumbStyle} from './util';
 import {on, off} from '../../libs/utils/dom';
 
 export class Bar extends Component {
-
   constructor(props) {
     super(props);
+
+    this.clickTrackHandler = this.clickTrackHandler.bind(this);
+    this.clickThumbHandler = this.clickThumbHandler.bind(this);
+    this.mouseMoveDocumentHandler = this.mouseMoveDocumentHandler.bind(this);
+    this.mouseUpDocumentHandler = this.mouseUpDocumentHandler.bind(this);
   }
 
   get bar() {
@@ -24,14 +28,14 @@ export class Bar extends Component {
 
   clickTrackHandler(e) {
     const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
-    const thumbHalf = (this.refs.thumb[this.bar.offset] / 2);
-    const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.root[this.bar.offset]);
+    const thumbHalf = (this.thumbRef[this.bar.offset] / 2);
+    const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.rootRef[this.bar.offset]);
 
     this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
   }
 
   startDrag(e) {
-    e.stopImmediatePropagation();
+    e.nativeEvent.stopImmediatePropagation;
     this.cursorDown = true;
 
     on(document, 'mousemove', this.mouseMoveDocumentHandler);
@@ -45,9 +49,9 @@ export class Bar extends Component {
 
     if (!prevPage) return;
 
-    const offset = (e[this.bar.client] - this.root.getBoundingClientRect()[this.bar.direction]);
-    const thumbClickPosition = (this.refs.thumb[this.bar.offset] - prevPage);
-    const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.root[this.bar.offset]);
+    const offset = (e[this.bar.client] - this.rootRef.getBoundingClientRect()[this.bar.direction]);
+    const thumbClickPosition = (this.thumbRef[this.bar.offset] - prevPage);
+    const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.rootRef[this.bar.offset]);
 
     this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
   }
@@ -64,13 +68,13 @@ export class Bar extends Component {
 
     return (
       <div
-        ref="root"
+        ref={root => this.rootRef = root}
         className={this.classNames('el-scrollbar__bar', `is-${this.bar.key}`)}
-        onMouseDown={ this.clickTrackHandler.bind(this) } >
+        onMouseDown={ this.clickTrackHandler } >
         <div
-          ref="thumb"
+          ref={thumb => this.thumbRef = thumb}
           className="el-scrollbar__thumb"
-          onMouseDown={ this.clickThumbHandler.bind(this) }
+          onMouseDown={ this.clickThumbHandler }
           style={ renderThumbStyle({ size, move, bar: this.bar }) }>
         </div>
       </div>
@@ -83,5 +87,4 @@ Bar.propTypes = {
   size: PropTypes.string,
   move: PropTypes.number,
   getParentWrap: PropTypes.func.isRequired
-
 }