fix events can not be removed, fixed #151

Author: hustcc

__tests__/index.spec.jsx

@@ -121,7 +121,6 @@ describe('index.js', () => {
     const component = mount(<EchartsReact
       option={option}
       opts={{renderer: 'svg'}}
-
     />);
 
     const preId = component.instance().getEchartsInstance().id;
@@ -142,6 +141,39 @@ describe('index.js', () => {
     expect(preId).not.toBe(component.instance().getEchartsInstance().id);
   });
 
+  // update opts, should dispose echarts instance.
+  test('update onEvents', () => {
+    const component = mount(<EchartsReact
+      option={option}
+      onEvents={{
+        click: () => {},
+        mousemove: () => {},
+      }}
+    />);
+
+    const preId = component.instance().getEchartsInstance().id;
+    // udpate props
+    component.setProps({
+      onEvents: {
+        mousemove: () => {},
+        click: () => {},
+      }
+    });
+
+    component.update(); // force update
+    expect(preId).toBe(component.instance().getEchartsInstance().id);
+
+    // udpate props
+    component.setProps({
+      onEvents: {
+        click: () => {},
+      }
+    });
+
+    component.update(); // force update
+    expect(preId).not.toBe(component.instance().getEchartsInstance().id);
+  });
+
   test('unmount', () => {
     const component = mount(<EchartsReact
       option={option}

demo/dist/bundle.js

@@ -74,20 +74,21 @@ var EchartsReactCore = function (_Component) {
     };
 
     _this.bindEvents = function (instance, events) {
-      var _loopEvent = function _loopEvent(eventName) {
+      var _bindEvent = function _bindEvent(eventName, func) {
         // ignore the event config which not satisfy
-        if (typeof eventName === 'string' && typeof events[eventName] === 'function') {
+        if (typeof eventName === 'string' && typeof func === 'function') {
           // binding event
-          instance.off(eventName);
+          // instance.off(eventName); // 已经 dispose 在重建，所以无需 off 操作
           instance.on(eventName, function (param) {
-            events[eventName](param, instance);
+            func(param, instance);
           });
         }
       };
 
+      // loop and bind
       for (var eventName in events) {
         if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-          _loopEvent(eventName);
+          _bindEvent(eventName, events[eventName]);
         }
       }
     };
@@ -125,15 +126,18 @@ var EchartsReactCore = function (_Component) {
       var echartObj = this.renderEchartDom();
       this.bindEvents(echartObj, this.props.onEvents || {});
 
-      // 1. 切换 theme 的时候，需要 dispose 之后再新建
-      // 2. 修改 opts 的时候，需要 dispose 之后再新建
-      if (this.props.theme !== prevProps.theme || !isEqual(prevProps.opts, this.props.opts)) {
+      // 以下属性修改的时候，需要 dispose 之后再新建
+      // 1. 切换 theme 的时候
+      // 2. 修改 opts 的时候
+      // 3. 修改 onEvents 的时候，这样可以取消所以之前绑定的事件 issue #151
+      if (prevProps.theme !== this.props.theme || !isEqual(prevProps.opts, this.props.opts) || !isEqual(Object.keys(prevProps.onEvents).sort(), Object.keys(this.props.onEvents).sort())) {
         this.dispose();
 
         this.rerender(); // 重建
         return;
       }
 
+      // 样式修改的时候，可能会导致大小变化，所以触发一下 resize
       if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) {
         try {
           echartObj.resize();

lib/core.js

@@ -1,6 +1,6 @@
 {
   "name": "echarts-for-react",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "baidu Echarts(v3.x & v4.x) components for react.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package.json

@@ -21,15 +21,22 @@ export default class EchartsReactCore extends Component {
     const echartObj = this.renderEchartDom();
     this.bindEvents(echartObj, this.props.onEvents || {});
 
-    // 1. 切换 theme 的时候，需要 dispose 之后再新建
-    // 2. 修改 opts 的时候，需要 dispose 之后再新建
-    if (this.props.theme !== prevProps.theme || !isEqual(prevProps.opts, this.props.opts)) {
+    // 以下属性修改的时候，需要 dispose 之后再新建
+    // 1. 切换 theme 的时候
+    // 2. 修改 opts 的时候
+    // 3. 修改 onEvents 的时候，这样可以取消所以之前绑定的事件 issue #151
+    if (
+      prevProps.theme !== this.props.theme ||
+      !isEqual(prevProps.opts, this.props.opts) ||
+      !isEqual(Object.keys(prevProps.onEvents).sort(), Object.keys(this.props.onEvents).sort())
+    ) {
       this.dispose();
 
       this.rerender(); // 重建
       return;
     }
 
+    // 样式修改的时候，可能会导致大小变化，所以触发一下 resize
     if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) {
       try {
         echartObj.resize();
@@ -74,20 +81,21 @@ export default class EchartsReactCore extends Component {
 
   // bind the events
   bindEvents = (instance, events) => {
-    const _loopEvent = (eventName) => {
+    const _bindEvent = (eventName, func) => {
       // ignore the event config which not satisfy
-      if (typeof eventName === 'string' && typeof events[eventName] === 'function') {
+      if (typeof eventName === 'string' && typeof func === 'function') {
         // binding event
-        instance.off(eventName);
+        // instance.off(eventName); // 已经 dispose 在重建，所以无需 off 操作
         instance.on(eventName, (param) => {
-          events[eventName](param, instance);
+          func(param, instance);
         });
       }
     };
 
+    // loop and bind
     for (const eventName in events) {
       if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-        _loopEvent(eventName);
+        _bindEvent(eventName, events[eventName]);
       }
     }
   };