react中在函数绑定时会马上执行.没有加括号不会马上执行

最新推荐文章于 2023-02-10 15:43:19 发布
最新推荐文章于 2023-02-10 15:43:19 发布
阅读量4.1k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37281289/article/details/79819220
版权

例如绑定一个点击事件  

    <div onClick={ handlerClick(i) }>点击我呀!</div>  

有加括号传入参数,就会马上执行 .

解决办法如下:

     <div onClick={ ()=>{ handlerClick(i) } }>点击我呀!</div>  

如上写法不会在加载时就马上执行,而是有点击事件发生是才会触发 handlerClick(i) 函数

Day____Day____Up
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小知识：C语言中，调用函数时，函数名后面忘记带上小括号了，会发生什么？
wanliangsheng的博客
12-30 2157
示例代码： #include <stdio.h> int num = 0; //声明一个全局变量 int test_01() //声明&定义函数，如果成功执行，全局变量num会+1 { return num++; } int main() { test_01; //调用函数不带小括号 printf("调用函数不带小括号的结果：%d \n", num); test_01(); //正常调用函数 printf("正常调用函数的结果：%d \n", num); retur
在React中如何优雅的处理事件响应详解
08-29
然而，如果逻辑复杂，将所有代码放在`onClick`的大括号中会使`render`函数变得难以阅读。因此，我们可以将逻辑封装到组件的方法中，如代码2所示。使用箭头函数的一个优点是自动绑定`this`，使得在方法中访问组件状态...
react学习基础----在click点击事件中为什么不需要加括号
m0_47531829的博客
01-02 1217
1.关于在react类组件中绑定单击事件click为什么不需要加括号的原因。 在原生js中为事件绑定clik事件的时候，需要加括号，如下代码 <body> <h1 onclick="toClick">绑定click事件</h1> <script> function toClick() { alert('111') } </script> </body&
react 带参数事件方法不立即执行
weixin_33675507的博客
11-15 834
handleClick:()=>{this.to_step('to_step3_2')}} 转载于:https://www.cnblogs.com/thinkingthigh/p/9964092.html
在 React 中，如果你写了 onClick = "this.function()"，这会在组件加载时立即执行该函数，为什么它相当于在组件的 HTML 元素上直接执行该函数？...
weixin_35750953的博客
02-10 200
在这种写法中，您将字符串 "this.function()" 直接传递给 onClick 属性。这意味着，在组件加载时，JavaScript 将立即评估该字符串，并执行函数。 这与在 HTML 元素上直接执行函数类似，因为它在组件加载时立即执行，而不是在点击事件发生时才执行。 与此相反，正确的方法是将函数作为 onClick 的值传递，例如： onClick={this.function} 这样，...
react 函数自调用
qq_44255141的博客
08-02 486
react爬坑日记（函数自调用） 在react实际开发中，经常可能会因为一些写法的原因，导致出现一些莫名其妙的BUG 1.例如 函数加不加小括号的问题 在这里可以看到在进行审批的函数，handleOk 这个函数我们没有加入括号 所以我们的功能还是正常执行的，不会出现跳跃式的BUG。 但是如果咱们是这样写的话，这个函数就会因为react绑定dom的方式而变得立即执行 解决这个问题的话，我们有两个方法 1.如果不需要传参 我们直接写 函数名 2. 如果需要传参，我们就用下面这个方式 如有不当之处 欢迎各
针对JavaScript（ES6）中的箭头函数详解
01-20
当不使用大括号时，如`con1`，箭头函数会自动返回其内部的表达式，这在React中意味着返回一个组件。而`con2`则需要显式地使用`return`返回组件，否则组件将无法正确渲染。 总结： - 后面是小括号的箭头函数默认只有...
JavaScript_为经验丰富的React开发人员准备的入门指南.zip
最新发布
05-20
在React中，事件处理函数绑定到DOM元素上，使用小驼峰命名法，并通常通过箭头函数避免`this`上下文问题。 11. **性能优化** 使用`shouldComponentUpdate`或`React.memo`进行组件的浅比较，以减少不必要的渲染。`...
React实现全选功能
10-14
5. **渲染列表项**：在JSX中，我们可以遍历`list`状态并为每个选项生成一个`input[type="checkbox"]`元素，同时为每个元素绑定`onChange`事件处理函数`singleChecked`，以便于在选项被点击时更新状态。 6. **事件...
React学习笔记（参考官方文档总结）
09-19
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。 在 ES6 中，我们可以使用 let 和 const 声明变量。let 和 const 都是块级作用域。变量声明只在代码...
想要调用组件实例的方法-ref
imkaifan的博客
10-13 384
就看： this.renderCityIndex()方法， componentDidMount()，以及在构造函数中创建ref即可 为了获取实例，调取实例上的一些方法 React.createRef() ==注意：==需要在实例上添加ref属性 import React from "react"; import axios from "axios"; import { getCurrentCity } from "../../utils/index"; import { NavBar } from "an.
Bug修改：React中onClick/onChange传值 （bind绑定/箭头函数）
CSmengy473的博客
09-14 786
项目场景：前端点击下载附件 使用某一个特定button按钮 Button onClick={this.handleDownload("stations")} 点击任意button，handleDownload函数会无条件被触发，都会导致无限制下载。 handleDownload=(mode)=>{ //操作 } 学习React中点击事件传参 问题描述： 使用某一个特定button按钮 Button onClick={this.handleDownload("stations")} 点
如何解决?react button自动执行绑定的onClick事
Roy Blog!
09-06 8754
这种绑定onClick事件的方式，会自动运行点击事件的方法 &lt;li className="item-four" onClick={this.nextPath('/item?goodsId='+goodsId)} data-index="AA174F9BFC1F4DDEAF728B8E77F80741"&gt; 改用这种绑定onClick事件的方式，箭头函数 &lt;li c...
为什么React事件处理函数必须使用Function.bind()绑定this？
weixin_33882443的博客
11-03 82
最近在React官网学习Handling Events这一章时，有一处不是很明白。代码如下： class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is nece...
【已解决】react 点击事件自动执行？
程序边界
11-26 1693
事件如果包含() ，就会变成执行函数，页面加载后会自动执行， 从而导致这个结果 class Title extends React.Component { render(){ return <h1 onClick={message('页面跳转')}>{title}</h1> } } 用箭头函数装饰一下即可避免： class Title extends React.Component { render(){ return <h1 onCl
react onClick自执行问题与react绑定事件的几种方式比较（性能与优缺点）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-16 1873
写组件的时候发现子组件的onClick方法自动执行了，代码如下: let columns=[ { title:"姓名", width:"150", dataIndex:"name" }, { title:"年龄", width:"150", dataIndex:"age" }, { title:"菜单权限", width:"150", dataIndex:"menuConfig", //render=(text,record)=>{ //return(
react中点击事件带参数会立即执行2021-07-05
北冥の魚
07-05 305
react中点击事件带参数会立即执行2021-07-05 环境：本次使用版本为"react": “^17.0.2” 之前的版本也有同样的问题，点击事件存在该问题，其他事件同理； 问题代码如下，用该种方式写点击事件则页面初始化的时候就会执行该事件 import './App.css'; const App = () => { const btnAction=(a)=>{ console.log(this,a++); } return ( <div classNa
React生命周期调用函数介绍
u010945409的博客
06-06 2084
React生命周期调用函数介绍 /** * Created by xieyuhai on 17/6/5. */ var MainComponent = React.createClass({ //设置数据的默认值 getDefaultProps: function () { console.log("getDefaultProps");
div添加一个点击事件（绑定点击事件）
热门推荐
l_degege的专栏
08-18 1万+
1、HTML onclick 事件属性 https://www.feiniaomy.com/post/339.html https://www.w3school.com.cn/tags/event_onclick.asp 2、JavaScript 详说事件机制之冒泡、捕获、传播、委托 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
react 函数时组件 什么方法在渲染之前执行
05-31
在 React 函数式组件中，可以使用 `useEffect` 钩子函数来执行一些副作用操作。其中，可以通过传递一个空数组作为第二个参数，来指定只在组件挂载时执行一次，即在渲染之前执行。例如： ``` import React, { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值