当前位置:首页 > JavaScript > 正文内容

JS中绑定方法加括号和不加括号的区别

flowstone5年前 (2021-01-03)JavaScript686

问题描述

在React开发中,遇到一个页面不停调用接口问题,如下图所示 


问题解决

查找哪里调用了接口,最后在刷新按钮上找到了问题所在,如下所示

<Button
    type="text"
    icon={<ReloadOutlined />}
    title="刷新"
    onClick={loadData()}
/>


按钮的点击事件上绑定了一个方法,loadData这是一个普通的查询接口,问题就是loadData()后面加了一对括号,如果我把括号去掉,问题就可以完美解决了,如下所示

<Button
    type="text"
    icon={<ReloadOutlined />}
    title="刷新"
    onClick={loadData}
  />


问题思考

为什么会出现这个问题?

Google了一会,得到了我想要的答案

  • onClick中绑定方法加括号:相当于直接把函数的返回值给onClick方法,会直接触发点击事件,不需要用户点击

  • onClick中绑定方法不加括号:相当于把整个函数赋值给onClick方法,不会触发点击事件,需要用户点击


扫描二维码推送至手机访问。

版权声明:本文由薛尧的博客发布,如需转载请注明出处。

本文链接:https://flowstone.sourceforge.io/?id=60

分享给朋友:

相关文章

JS特效-轮播图

效果如下功能分析每隔1秒换一张图片鼠标移入停止切换、鼠标离开继续切换鼠标移入到数字上面的时候,显示和数字对应的图片,并且停止切换,被选中的数字,背景显示橙色鼠标离开数字,从该数字后面继续显示代码如下<!DOCTYPE htm...

AJAX省市县三级联动的实现

省市县数据本例子中省市县数据保存在MySQL数据库中,部分数据截图如下:从数据库中读取数据1、导入需要的jar包2、连接池配置文件<c3p0-config>     <!--&nb...

React Ant框架中分页的快速使用

使用环境ReactAnt DesignSpringBootSpring Data JPA前端页面首先,我们要查看Ant官方文档,一般涉及到分页的页面都是列表查询,在表格组件中找到API,可以从API中看到使用方法,查看文档后,编写代码如下&...

React中useState如何给对象中的某一个属性赋值

问题描述在React文件中使用了useState,定义了查询条件,这个查询条件实际上是一个对象,如下所示const [requestParam, setRequestParam] = useState...

React中如何实现文件上传功能

场景描述在前端页面中,经常会使用到文件上传功能,我们如何实现上传功能呢?开发环境React ^16.12.0Ant Design ^5.0.12SpringBoot 2.3.0页面实现文件上传首先我们要用到Ant框架中自带的上传组件Uplo...