0. 需要安装events包
安装命令: yarn add events
import React, { PureComponent } from 'react'
// 1. 导入
import { EventEmitter } from "events";
//2.创建事件总线
const eventBus = new EventEmitter();
class Home extends PureComponent {
// 4.接收事件传递过来的参数
componentDidMount() {
// 监听的事件名 抽离简化代码
eventBus.addListener("sayHello", this.handleSayHelloListener)
}
// 5. 销毁事件
componentWillUnmount() {
// 监听的事件名 抽离简化代码
eventBus.removeListener("sayHello", this.handleSayHelloListener)
}
handleSayHelloListener(...args) {
console.log('我是在Home页面接收的参数:',...args);
}
或者:
handleSayHelloListener(num,info) {
console.log(num,info);
}
render() {
return (
<div>
Home
</div>
)
}
}
class Profile extends PureComponent {
render() {
return (
<div>
Profile
{/* 3.点击按钮发射事件出去 */}
<button onClick={e => this.emmitEvent()}>非父子组件通讯</button>
</div>
)
}
emmitEvent() {
事件名称 参数一 参数二
eventBus.emit('sayHello', "Hello,Home", 123)
}
}
export default class App extends PureComponent {
render() {
return (
<div>
<Home />
<Profile />
</div>
)
}
}
详细解释如下:
import React, { PureComponent } from 'react';
// 1.EventEmitter(事件发射)--> 这个是一个类
import { EventEmitter } from "events"
// 2.创建事件总线: event bus
// 像这样的文件你是可以单独的存在一个全局的文件中的
// 然后你再导入到你需要的文件中
const eventBus = new EventEmitter();
class Home extends PureComponent {
// 5. 要想监听的话 你要在组件的生命周期里面去监听
// componentDidMount(){} 要在挂载阶段去监听你的事件
// componentWillUnmount() {} 要在卸载过程去下载你的事件
componentDidMount() {
/**
* eventBus.addListener()方法里面是有2个参数的
*
* 第一个参数是:监听兄弟组件传递过来的事件名称
* 第二个参数是: 一个回调函数
*
* **/
// eventBus.addListener('sayHello',(...args)=>{
// console.log(args);
// })
eventBus.addListener('sayHello',this.handleSayHelloListenner)
}
componentWillUnmount() {
// 6. 当组件即将消失的时候 你应当清楚监听事件
// eventBus.removeListener()清除事件名称
eventBus.removeListener("sayHello",this.handleSayHelloListenner)
}
// 单独定义这个事件
handleSayHelloListenner(...args) {
console.log(...args);
}
render() {
return (
<div>
Home
</div>
)
}
}
// 需求 当我在这个组件中点击按钮
// 向上面的Home 组件传递一条数据过去
// 然后在Home组件中展示出来
// 解决方案:
// 需要下载一个第三方库 events --- > yarn add events
class Profile extends PureComponent {
render() {
return (
<div>
Profile
{/* 3.发射一个事件出去 */}
<button onClick={e => this.emitEvent()}>点击了Profile按钮</button>
</div>
)
}
emitEvent() {
// 上面全局定义的一个eventBus对象 他new出来的有个事件叫emit
// 4. emit() 方法里面 第一个参数是:事件名称,第二个是: 传递的参数
eventBus.emit("sayHello", 'hello,world', 123322)
}
}
class App extends PureComponent {
render() {
return (
<div>
<Home />
<Profile />
</div>
);
}
}
export default App;
事件截图:
image.png
案例实现:
import React, { PureComponent } from 'react';
import { EventEmitter } from "events"
//1.
const EventBus = new EventEmitter()
class Header extends PureComponent {
constructor(props) {
super(props)
this.state = {
infoData: {
name: "胡振楚",
money: "0W",
},
eventInfo: "没有参数传递过来"
}
}
// 4.接收事件传递过来的参数
componentDidMount() {
// 这个地方必须要用 ...args 结构这个数组,不然你的第二个参数或者更多的参数 传递不过来
EventBus.addListener('NameMoenyClick', (...args) => {
console.log(args)
const newInfo = args[0]
const newEventInfo = args[1]
this.setState({
infoData: newInfo,
eventInfo: newEventInfo
})
})
}
// 5. 销毁事件
componentWillUnmount() {
EventBus.removeListener("NameMoenyClick", () => { })
}
render() {
return (
<div>
Header页面
<div>{this.state.infoData.name}</div>
<div>{this.state.infoData.money}</div>
<div>{this.state.eventInfo}</div>
</div >
)
}
}
class Footer extends PureComponent {
constructor(props) {
super(props)
this.state = {
name: "张三",
money: "100W"
}
}
render() {
return (
<div>
Header页面
{/* 2. 绑定事件 */}
<button onClick={e => this.eventBusClick()}>发射事件到Header页面</button>
</div >
)
}
// 3. 发射事件出去
eventBusClick() {
EventBus.emit('NameMoenyClick', { name: this.state.name, money: this.state.money }, "我是第二个参数,Footer传递过来的参数")
}
}
class App extends PureComponent {
render() {
return (
<div>
<Header />
<hr />
<Footer />
</div>
);
}
}
export default App;
实际截图:
image.png
网友评论