React Events API

安装events

yarn add events

events常用的API:

• 创建EventEmitter对象: eventBus对象;

import {EventEmitter} from "events"; // 引入 EventEmitter
const eventBus = new EventEmitter()

• 发出事件: eventBus.emit("事件名称", 参数列表);

// btnClick: 事件名，   kevin,18: 参数
eventBus.emit("btnClick","kevin",18) 

• 监听事件: eventBus.addListener("事件名称", 监听函数);

// 通过 eventBus.addListener 接收函数 btnClick
// 将函数 btnClick 映射到 this.headerClick 函数
eventBus.addListener("btnClick", this.headerClick)

• 移除事件: eventBus.removeListener("事件名称", 监听函数);

eventBus.removeListener("btnClick", this.headerClick);

代码演示

import React, {Component} from "react";
import {EventEmitter} from "events";

// 创建EventEmitter对象: eventBus对象;
const eventBus = new EventEmitter()

/**
 创建EventEmitter对象: eventBus对象;
 发出事件: eventBus.emit("事件名称", 参数列表);
 监听事件: eventBus.addListener("事件名称", 监听函数);
 移除事件: eventBus.removeListener("事件名称", 监听函数);
 */

class ProfileHeader extends Component{
  btnClick(){
    eventBus.emit("sonClick","kevin",18)
  }
  render() {
    return (
      <div>
        <button onClick={e=>this.btnClick()}>点我一下</button>
      </div>
    )
  }
}

class Profile extends Component{
  render() {
    return (
      <div>
        <ProfileHeader/>
      </div>
    )
  }
}


export default class Event extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  // 挂载完成阶段, 通过 eventBus.addListener 接收函数 sonClick
  // 将函数 sonClick 映射到 this.headerClick 函数
  componentDidMount() {
    eventBus.addListener("sonClick", this.headerClick)
  }

  // 实现函数并接收参数
  headerClick(name, age) {
    console.log(name, age);
  }

  // 组件卸载阶段, 移除监听事件
  componentWillUnmount() {
    eventBus.removeListener("sonClick", this.headerClick);
  }

  render() {
    return (
      <div>
        <Profile/>
        <h2>其他内容</h2>
      </div>
    )
  }
}

END