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>
  )
}
相关推荐
UrbanJazzerati1 分钟前
前端入门:vh、padding、margin、outline、pointer-events
前端·面试
wordbaby10 分钟前
一行看懂高阶函数:用 handleConfirm 拿下 DatePicker 回调
前端·react.js
XiaoMu_00111 分钟前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静17 分钟前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
Mintopia31 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_33 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia33 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub36 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw39 分钟前
hippy的主要原理
前端
子兮曰42 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化