| 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); |
| console.log(e.target); |
| } |
| |
| 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} />; |
| } |
| } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥