react 中的绑定事件

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} />;
}
}
posted @   Ajanuw  阅读(884)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示