(三)React事件

1. React基础事件绑定

语法: on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法

在这里插入图片描述

App.js

//项目根组件
//App -> index.js -> public/index.html(root)

function App() {
    const handleClick = () => {
        console.log('button被点击了')
    }
    return (
        <div className="App">
            <button onClick={handleClick}>click me</button>
        </div>
    );
}

export default App;

在这里插入图片描述

2. 使用事件对象参数

语法:在事件回调函数中设置形参e

在这里插入图片描述
在这里插入图片描述

3. 传递自定义参数

语法:事件绑定的位置改造成箭头函数的写法,再执行clickHandler实际处理业务函数的时候传递实参
在这里插入图片描述
在这里插入图片描述

注意:不能直接写函数调用,这里事件绑定需要一个函数引用

4. 同时传递事件对象和自定义参数

在这里插入图片描述
在这里插入图片描述

相关推荐

  1. ReactReact响应事件

    2024-06-10 08:26:01       17 阅读
  2. React——关于事件处理

    2024-06-10 08:26:01       21 阅读
  3. react之响应事件

    2024-06-10 08:26:01       10 阅读
  4. 说说react事件机制?

    2024-06-10 08:26:01       40 阅读
  5. React 表单与事件

    2024-06-10 08:26:01       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-10 08:26:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-10 08:26:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-10 08:26:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-10 08:26:01       18 阅读

热门阅读

  1. 什么是幂等问题?

    2024-06-10 08:26:01       11 阅读
  2. kmp算法c++

    2024-06-10 08:26:01       8 阅读
  3. 树莓派 ubuntu linux 去除蓝牙历史配对信息

    2024-06-10 08:26:01       12 阅读
  4. 从零手写实现 nginx-13-nginx.conf 是 HOCON 的格式吗?

    2024-06-10 08:26:01       11 阅读
  5. 使用cython将现有c/c++库移植为python模块

    2024-06-10 08:26:01       13 阅读
  6. 【冲刺秋招,许愿offer】第 二 天

    2024-06-10 08:26:01       8 阅读
  7. React antd 怎么封装枚举字典组件

    2024-06-10 08:26:01       11 阅读
  8. 常用的国内外公共DNS服务

    2024-06-10 08:26:01       9 阅读