handleOpen = (e)=> {
this.setState({
open: true
})
}
<Button color='primary' onClick={this.handleOpen}>打开模态框</Button>

在构造函数里面 bing

    constructor(props){
super(props);
this.handleOpen = this.handleOpen.bind(this);
} handleOpen(e) {
this.setState({
open: true
})
} <Button color='primary' onClick={this.handleOpen}>打开模态框</Button>

获取点击事件的元素

	asd = e=>{
console.log(e.currentTarget); // div>span
console.log(e.target); // span
} return (
<React.Fragment>
<div onClick={this.asd}><span>click me</span></div>
</React.Fragment>
);

传递参数

  handleOpen = hello => ({target}) =>{
l(hello, target)
} <Button color='primary' onClick={this.handleOpen('hello')}>打开模态框</Button>

e.preventDefault(); 阻止默认行为

e.stopPropagation() 阻止事件传播(冒泡)

支持的事件名

rxjs 防抖

<RootRef rootRef={e => this.button = e}>
<Button color='secondary'>Get Json</Button>
</RootRef> componentDidMount() {
fromEvent(this.button, 'click')
.pipe(
throttleTime(2000))
.subscribe(async v => {
let res = await ajax('http://localhost:1995/a')
.pipe(map(res => res.response))
.toPromise();
store
.state
.users
.push(res)
})
}

lodash 防抖

// 带参数
<Button color='secondary' onClick={this.handleClick('ajanuw')}>Get Json</Button>
handleClick = (name) => throttle((e) => {
l(name)
}, 2000) // 不带参数
<Button color='secondary' onClick={this.handleClick}>Get Json</Button>
handleClick = throttle((e) => {
l(1)
}, 2000)

rxjs debounce

class Hello extends Component {
list = new Array(20).fill(0); render() {
return (
<div
ref={this.props.helloRef}
style={{
width: 400,
height: 200,
border: "1px solid red",
overflow: "auto",
}}
>
{this.list.map((el, i) => (
<li key={i}>{i}</li>
))}
</div>
);
}
} class Test extends Component {
helloRef = React.createRef();
componentDidMount() {
fromEvent(this.helloRef.current, "scroll")
.pipe(debounceTime(20))
.subscribe(v => {
l(v.target.scrollTop);
});
}
render() {
return <Hello helloRef={this.helloRef} />;
}
}

react 中的绑定事件的更多相关文章

  1. React中的合成事件

    React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. ...

  2. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  3. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  4. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

  5. jquery appaend元素中id绑定事件失效问题

    1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...

  6. vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- < ...

  7. Jquery中on绑定事件 点击一次 执行多次 的解决办法

    举个例子,在同一个页面有下拉选择框 <select class="mySelect"> <option value="user">按用户 ...

  8. vue中<select>绑定事件

    <div id="app"> <select v-model="selectItem" @change="selectFn($eve ...

  9. JavaScript中,有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

随机推荐

  1. Redis简单示例

    1.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工作由VMwa ...

  2. html5使用canvas动态画医学设备毫秒级数据波形图

  3. (原)matlab导出oracle中blob的jpg数据到图片

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/10092965.html function write_blob_info(blob) len = b ...

  4. 读吴恩达算-EM算法笔记

    最近感觉对EM算法有一点遗忘,在表述的时候,还是有一点说不清,于是重新去看了这篇<CS229 Lecture notes>笔记. 于是有了这篇小札. 关于Jensen's inequali ...

  5. 【C++】C++中的分离式编译

    在C++中随着程序越来越复杂,我们希望把程序的各个部分分别储存在不同的文件中.C++支持的分离式编译(separate compilation)允许我们把程序分割到几个文件中去,每个文件独立编译. 头 ...

  6. CentOS 6.5 x64下安装VMware tools

    [root@CentOS6 /]# mount /dev/cdrom /mnt mount: block device /dev/sr0 is write-protected, mounting re ...

  7. Android Studio系列-签名打包

    本篇博客纪录使用Android Studio对项目进行签名打包,跟Eclipse大同小异,读者朋友注意其中到差别. 第一步 创建签名文件 第二步 填写签名参数 第三步 选择构建类型 第四步 查看生成第 ...

  8. [HDFS Manual] CH6 HDFS Federation

    HDFS Federation HDFS Federation 1 Background 2.多个namenode/namespace 2.1 关键好处 3 联合配置 3.1 配置 3.2 格式化na ...

  9. vue2.0 技巧汇总

    /** * Created by */ export default { trim: (str) => { //删除左右两端的空格 return str.replace(/(^\s*)|(\s* ...

  10. 【Java】类加载过程

    JVM把class文件加载到内存,并对数据进行校验.解析和初始化,最终形成JVM可以直接使用的Java类型的过程. 类加载的过程主要分为三个部分: 加载 链接 初始化 而链接又可以细分为三个小部分: ...