React 中的事件绑定与参数传递

React 中的事件绑定与参数传递

语法:on + 事件类型 = { 事件处理程序 },整体上遵循驼峰命名法
jsx 复制代码
function App() {
  const handleClick = () => {
    console.log('点击了按钮');
  }
  return (
    <div>
      <button onClick={handleClick}>点击我</button>
    </div>
  )
}

使用事件对象参数

语法:on + 事件类型 = { (event) => { 事件处理程序 } }
jsx 复制代码
function App() {
  const handleClick = (e) => {
    console.log(e);
  }
  return (
    <div>
      <input type="text" onChange={handleClick} />
    </div>
  )
}

传递自定义参数

语法:on + 事件类型 = { () => { 事件处理程序(参数) } }
jsx 复制代码
function App() {
  const handleClick = (name) => {
    console.log(`点击了按钮${name}`);
  }
  return (
    <div>
      <button onClick={() => handleClick('Jack')}>点击我</button>
    </div>
  )
}

事件对象参数与自定义参数结合

语法:on + 事件类型 = { (event) => { 事件处理程序(event, 参数) } }
jsx 复制代码
function App() {
  const handleClick = (e, name) => {
    console.log(e);
    console.log(`点击了按钮${name}`);
  }
  return (
    <div>
      <button onClick={(e) => handleClick(e, 'Jack')}>点击我</button>
    </div>
  )
}
相关推荐
玄魂1 分钟前
有了Trae 上下文doc功能 ,快速上手陌生组件,再也不用提oncall了
前端·数据可视化·trae
不爱说话郭德纲4 分钟前
Vue scoped都用过吧,它是怎么实现样式隔离的?React又是怎么实现的
前端·javascript·vue.js
OpenTiny社区14 分钟前
直播预告|TinyVue 组件库高级用法:定制你的企业级UI体系
前端·vue.js·开源
David凉宸14 分钟前
一篇文带你使用vue完成一个完整后台
前端
我怎么能这么帅气14 分钟前
picocolors:终端输出美化的极简利器,快如闪电的ANSIColor库!
javascript·npm
嘻嘻嘻嘻嘻嘻ys15 分钟前
《Spring Boot 3.2 × Java 21虚拟线程:百万并发Web应用实战与性能飞跃》
前端·后端
_志哥_18 分钟前
前端项目离线打包方案
前端·webpack
顾青18 分钟前
在 Electron 中引入本地谷歌插件
前端·electron
顾青19 分钟前
Electron自定义安装脚本
前端·electron
Aiolimp19 分钟前
React中CSS使用方法
前端·react.js