React基础之tsx语法

tsx在jsx的基础上添加了新的类型,除此之外没有任何区别

事件绑定

function App() {

const handleClick=()=>{

console.log('button被点击了');

}

return(

<div className="App">

<button onClick={handleClick}>click me</button>

</div>

)

}

export default App

传递自定义参数

需要指定箭头函数的形式

function App() {

const handleClick=(name)=>{

console.log('button被点击了',name);

}

return(

<div className="App">

<button onClick={()=>handleClick('jack')}>click me</button>

</div>

)

}

export default App

如果需要同时传递事件对象与自定义参数

需要在传递自定义参数的箭头函数的括号里面传递事件e

function App() {

const handleClick=(name,e)=>{

console.log('button被点击了',name,e);

}

return(

<div className="App">

<button onClick={(e)=>handleClick('jack',e)}>click me</button>

</div>

)

}

export default App

相关推荐
paopaokaka_luck37 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js