React项目中关于onclick的学习

最新推荐文章于 2025-04-05 15:45:19 发布

有有有何不可

最新推荐文章于 2025-04-05 15:45:19 发布

阅读量475

点赞数

分类专栏： React——学习记录文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/csdn0624/article/details/120317550

版权

React——学习记录专栏收录该内容

4 篇文章

订阅专栏

本文介绍了JavaScript中onClick事件的函数传递方式，探讨了无参数和带参数传递的正确格式，并展示了如何使用_.throttle进行节流操作，以提高性能。重点讲解了函数封装和参数传递的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onclick传递函数的格式

function = (e) => {
	console.log('我是一个函数'，e)
}

<button 
	onclick={this.function}.    //无参数传递时的正确的写法
/>

<button 
	onclick={this.function（‘这是错误的写法’）}.    //有参数传递时的错误的写法
/>

因为{}的作用，就是执行，所以此时onclick的函数会立即执行
所以传递参数时的正确写法如下

<button 
	onclick={（）=>{this.function（‘这是错误的写法’）}}.    //有参数传递时的正确的写法
/>

此时，onclick传递了一个函数，这个函数并未执行，当被点击后，这个函数执行，里边被包裹的函数也会执行，就可以在合适的时间传递参数了！
拓展:利用lodash 中的方法（_.throttle方法进行节流，表示1000毫秒内只能点一次）

<button 
	onclick={_.throttle
	(
	（）=>{this.function（‘这是错误的写法’）}, 
	1000
	)
}    //有参数传递时的正确的写法
/>

<button
    className='locationControl'
    onClick={_.throttle(() => { this.putCenterLocation() }, 2000)}      //无参数传递时也可以的包裹写法，主要为了节流。
/>