React非父子组件之间的事件传递
2023-09-27 14:22:47 时间
核心代码:
const eventBus = {
evnetList: [],
// 监听事件
pushFun(callbackFun, name) {
// 同名事件 过滤
if (this.evnetList.length > 0 && this.evnetList.find(i => i.name === name)) {
this.evnetList = this.evnetList.filter(i => i.name !== name)
}
this.evnetList = [...this.evnetList, { name, callbackFun }]
},
//触发事件
dispath(name, data = '') {
if (!name) {
return false;
}
this.evnetList.forEach(element => {
if (name === element.name) {
element.callbackFun(data)
}
});
},
// 取消事件监听
$remove(name = "") {
// console.log(name, "取消事件监听")
this.evnetList = [...this.evnetList.filter(i => i.name !== name)]
}
}
export default eventBus
上面是创建了一个js模块,总的来说是个对象,有三个属性,第一个evnetList是来存储对象的,这个对象通过pushFun来改变evnetList数组,格式如下:
evnetList: [{
name:'zjq',
callbackFun:()=>{}
}],
最终能通过触发方法dispath来触发对应name的函数,每一个函数的唯一标识就是name;
下面看一下使用:
1.js
componentDidMount() {
eventFun.pushFun((e) => {
console.log('e===我是菜单选项二传递过来的参数', e);
this.setState({
valueTopStr: e
})
}, 'childTopFun')
}
2.js
import React from "react";
import { Button, Input } from 'element-react';
import eventFun from "../../js/eventFun";
export default class Childtop extends React.Component {
constructor() {
super()
}
state = {
valueStr: ''
}
change() {
console.log('this.state.valueStr===', this.state.valueStr);
eventFun.dispath('childTopFun',this.state.valueStr)
}
changeFun(e) {
console.log('e===', e);
this.setState({
valueStr: e
})
}
render() {
return (
<div>
<p>我是childTop组件</p>
<Input placeholder="请输入内容" value={this.state.valueStr} onChange={(e) => { this.changeFun(e) }} />
<Button type="success" onClick={() => { this.change() }}>点击给top组件发送信息</Button>
</div>
)
}
}
1页面挂载的时候就开始监听name为childTopFun的事件函数,在2中,在input中输入点击按钮触发childTopFun事件,完成事件传递~
相关文章
- js-处理回车事件
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
- Vue.2.0.5-事件处理器
- C# 事件(Event)用法
- android事件总线
- 32.Vue:自定义事件组件交互
- 转载 【.NET基础】--委托、事件、线程(1) https://www.cnblogs.com/chengzish/p/4559268.html
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
- Gtest:事件
- Xcode12在storyboard添加组件和事件,添加新页面及跳转
- WinForm下的键盘事件(KeyPress、KeyDown)及如何处理不响应键盘事件
- 组件的自定义事件①
- [OHIF-Viewers]医疗数字阅片-医学影像-REACT向事件处理程序传递参数-.bind-传递函数给组件
- js事件冒泡
- oracle等待事件5——库高速缓存上的等待事件 上
- vue 里 onresize 事件被覆盖,以及怎么实现 resize 防抖、移除 resize 事件?
- 手把手教你写Linux设备驱动---input子系统(三)--电容屏事件坐标读取(基于友善之臂4412开发板)
- 2019-11-29-dotnet-remoting-使用事件
- 2019-6-15-WPF-触摸到事件
- 通过事件通知 实现react.js组件间通信