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

相关推荐
爱分享的程序员11 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘16 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出18 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的18 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解21 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵24 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im25 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man25 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下40 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构