React中的事件绑定的四种方式

1.在构造函数中绑定事件

javascript 复制代码
 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

2.在调用时显式绑定

javascript 复制代码
<button onClick={this.handleClick.bind(this)}>Click me</button>

3.使用箭头函数

javascript 复制代码
 handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }

4.直接传入一个箭头函数

javascript 复制代码
<button onClick={() => this.handleClick("1"}>Click me</button>;
相关推荐
zhanghaha13142 分钟前
HTML系列教程:17_HTML 框架(frameset、frame、iframe)零基础详解
前端·html
IT_陈寒13 分钟前
React的useEffect依赖项居然骗了我三年
前端·人工智能·后端
一个金牛座的前端18 分钟前
AI 写前端,优化的是演示,不是交付
前端·ai·cursor
球球不吃虾35 分钟前
Nuxt在使用过程中的一些小总结(二)
前端·vue·nuxt
朝屯暮蒙vi1 小时前
随记:h5+中uploader不能添加参数数据,要通过task
javascript
2601_958352904 小时前
A-59U 仅 37mm 却集成 USB + 双波束?
前端·回声消除·语音模块·降噪处理·降噪消回音
泯泷9 小时前
那段文字是谁删的?Yjs 14 正式版之前,一套删除归属方案的实现与边界
前端·javascript·算法
hold?fish:palm10 小时前
34 合并K个升序链表
javascript·算法·链表
野槐12 小时前
前端项目优化(有了我,会发生...)
前端
幸运小圣12 小时前
PointerEvent 常用属性与事件整理【JavaScript】
开发语言·javascript·ecmascript