react+dva项目组件间的事件传递

简述

点击父组件的按钮时希望在子组件中捕获这个点击事件，可以利用node自己的EventEmitter。

解决步骤

• 1、直接引入并新建实例，不用额外npm install events --save

  
  
  

  直接引入并新建实例

• 2、把第一步实例化的event传入子组件

  
  
  

  传入子组件

• 3、发送事件

  
  
  

  发送事件
  
  

  注意：event.emit方法中可以传第二个参数用来传值，如下：

event.emit('selectAll', 1);

• 4、在子组件中监听

  • 下面截图中监听事件中this所指对象已经改变，render方法中的this指组件实例，但this.props.event.on方法的回调函数中的this指EventEmitter实例。

    
    
    

    子组件

注意：回调函数的参数用来接收父组件发送过来的值，如下：

this.props.event.on('selectAll', function(value) {
  // 参数value即是父组件传过来的值，即value = 1
});

另：第4步截图中监听事件中的回调函数是匿名形式的写法，也可以传入实名参数，如下：

this.props.event.on('selectAll', this.selectAll);
this.props.event.on('cancelAll', this.cancelAll);

需要注意的是，监听事件可以传入匿名函数也可以传入实名函数，但是移除事件的时候，必须传入实名函数，传入匿名函数会有错误

• 5、移除事件的监听器

componentWillUnmount() {
    this.props.event.removeAllListeners('selectAll', this.selectAll);
    this.props.event.removeAllListeners('cancelAll', this.cancelAll);
}

这里没有用removeListener，而是用了removeAllListeners，这样更保险，因为在多次切换组件时，我发现removeListener并不能很好的移除事件的监听器。另外触发事件是点击等事件时，监听事件最好用once，而不是on。

想了解更多EventEmitter的API可点击这里。