首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react:为什么在没有点击的情况下onclick就会被执行?

在React中,onclick是一个事件处理函数,它用于处理元素的点击事件。在没有点击的情况下,onclick不会被执行。

然而,当在React中使用onclick时,它实际上是指向一个函数的引用,而不是直接执行函数。这意味着当React渲染组件时,会将onclick函数作为事件处理程序绑定到相应的元素上。

当渲染完成后,如果没有指定其他条件来阻止事件的触发(例如使用disabled属性),点击元素时,浏览器会触发点击事件,并执行绑定的事件处理程序。

需要注意的是,在React中,事件处理程序的命名应该遵循驼峰命名法,即使用小写字母开头,并且不使用on前缀。因此,正确的写法应该是onClick而不是onclick。

总结起来,React中的onclick事件处理程序在没有点击的情况下不会被执行,只有当元素被点击时才会触发执行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React--10: 组件三大核心属性3:refs与事件处理

我们不建议使用它,因为 string 类型 refs 存在一些效率上问题。它已过时并可能会在未来版本被移除(16.8版本还没有移除)。...点击按钮获取输入框数据 按照我们原生写法,怎么函数中获得输入框中内容呢?首先给输入框一个id,然后通过getElementById 获得输入框中值。... ref 回调函数是以内联函数方式定义更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。...这是因为每次渲染时会创建一个新函数实例,所以 React 清空旧 ref 并且设置新。...(点击改变天气使页面进行了更新) 当更新页面时,render方法就会被调用一次。

1.1K30

问:ReactuseState和setState到底是同步还是异步呢?

同步执行 ) }}当点击同步执行按钮时,只重新 render 了一次当点击异步执行按钮时,render 了两次跟useState结果一样同步和异步情况下...这里就涉及到 react batchUpdate 机制,合并更新。首先,为什么需要合并更新呢?...如果没有合并更新,每次执行 useState 时候,组件都要重新 render 一次,会造成无效渲染,浪费时间(因为最后一次渲染会覆盖掉前面所有的渲染效果)。...为什么 setTimeout 不能进行事务操作由于 react 事件委托机制,调用 onClick 执行事件,是处于 react 控制范围。...所以,我们知道了,当 executionContext 为 NoContext 时候,我们 setState 就是同步总结我们来总结一下上述实验结果:正常react事件流里(如onClick

2.1K10

ReactuseState和setState到底是同步还是异步呢?

这里就涉及到 react batchUpdate 机制,合并更新。首先,为什么需要合并更新呢?...如果没有合并更新,每次执行 useState 时候,组件都要重新 render 一次,会造成无效渲染,浪费时间(因为最后一次渲染会覆盖掉前面所有的渲染效果)。...为什么 setTimeout 不能进行事务操作由于 react 事件委托机制,调用 onClick 执行事件,是处于 react 控制范围。...而 flushSyncCallbackQueue 里面就会去同步调用我们 this.setState ,也就是说会同步更新我们 state 。...所以,我们知道了,当 executionContext 为 NoContext 时候,我们 setState 就是同步总结我们来总结一下上述实验结果:正常react事件流里(如onClick

1.1K30

问:ReactuseState和setState到底是同步还是异步呢?_2023-03-13

这里就涉及到 react batchUpdate 机制,合并更新。首先,为什么需要合并更新呢?...如果没有合并更新,每次执行 useState 时候,组件都要重新 render 一次,会造成无效渲染,浪费时间(因为最后一次渲染会覆盖掉前面所有的渲染效果)。...为什么 setTimeout 不能进行事务操作由于 react 事件委托机制,调用 onClick 执行事件,是处于 react 控制范围。...而 flushSyncCallbackQueue 里面就会去同步调用我们 this.setState ,也就是说会同步更新我们 state 。...所以,我们知道了,当 executionContext 为 NoContext 时候,我们 setState 就是同步总结我们来总结一下上述实验结果:正常react事件流里(如onClick

82120

React-Hooks-useMemo

decrement 方法,只要 countState 没有发生变化, 那么 useMemo 返回永远都是同一个值,那么永远都是同一个值,相关对应组件也就会不会重新渲染,因为值没有发生改变,state...,删除了之前 decrement 与 countState 然后定义了一个对象,把这个对象传递给了 About 然后 About 当中进行显示,然后运行项目点击 增加Home 你会发现,所有组件又重新渲染了...,那么这个原因在之前博主已经详细介绍过了,因为点击了增加按钮之后父组件重新渲染了,然后对象又会重新进行定义那么这回这个对象肯定是与上次是不一样,那么组件就会被重新渲染了,那么这个问题就可以利用...useCallback 和 useMemo 区别来解决, useMemo 有一个特点就是 返回是 return 返回内容 那么我们如果将对象通过这种方式进行返回,不依赖任何属性那么点击增加按钮...:import React, {useState} from 'react';function calculate() { console.log('calculate被执行了'); let

13720

React 进阶 - 事件系统

比如: 给元素绑定事件,不是真正事件处理函数 冒泡 / 捕获阶段绑定事件,也不是冒泡 / 捕获阶段执行 事件处理函数中拿到事件源 e ,也不是真正事件源 e React 为什么要写出一套自己事件系统呢...React 事件(如 onBlur )和与之对应处理插件映射 如 onClick就会用 SimpleEventPlugin 插件处理,onChange 就会用 ChangeEventPlugin...registrationNameDependencies 保存了 React 事件和原生事件对应关系 这是为什么只写了一个 onChange ,会有很多原生事件绑定在 document 上原因 事件绑定阶段...经过这第一步,初始化阶段,就已经注册了很多事件监听器了。 此时如果发生一次点击事件,就会触发两次 dispatchEvent : 第一次捕获阶段点击事件; 第二次冒泡阶段点击事件。...# 事件触发 当发生一次点击事件,React 会根据事件源对应 fiber 对象,根据 return 指针向上遍历,收集所有相同事件,比如是 onClick,那就收集父级元素所有 onClick

1.1K10

react思维

jsxonClick vs html行内事件处理onclick 这里补白一个问题: 为什么行内样式,行内事件处理被人诟病,react中却成为了一种常用写法?...即使现在,HTML中直接使用onclick很不专业,原因如下:· •onclick添加事件处理函数是全局环境下执行,这污染了全局环境,很容易产生意料不到后果;•给很多DOM元素添加onclick...•onClick使用了事件委托(event delegation)方式处理点击事件,无论有多少个onClick出现,其实最后都只DOM树上添加了一个事件处理函数,挂在最顶层DOM节点上。...如此一来,最终用户界面,render函数确定情况下完全取决于输入数据。...)思想,这也就是React为什么叫做React原因。

1.3K20

什么时候使用 useMemo 和 useCallback

这两个 hooks 内置于 React 都有特别的原因: 引用相等 昂贵计算 引用相等 如果你是 JavaScript 或者编程新手,你很快就会明白为什么会这样: true === true // true...React中,有两种情况下引用相等很重要,让我们一个个地来看。 依赖列表 让我们来回顾一个例子。 “警告,你将看到一些人为故意设计代码。请不要吹毛求疵,只关注概念,谢谢。...但是,实际上只需要重新渲染被点击那个按钮吧?因此,如果你点击第一个按钮,则第二个也会重新渲染,但没有任何变化,我们称之为“不必要重新渲染”。 大多数时候,你不需要考虑去优化不必要重新渲染。...我想重申下,没有测量前,强烈建议不要使用 React.Memo (或者它朋友 PureComponent 和 shouldComponentUpdate),因为优化总会带来成本,并且你需要确保知道会有多少成本和收益...除此之外,React还会在给定输入情况下存储先前值,并在给定跟之前相同输入情况下返回先前值。这是 memoization 起作用。 总结 最后,我想说,每个抽象(和性能优化)都是有代价

2.5K30

教你如何在 React 中逃离闭包陷阱 ...

什么是过期闭包,它们为什么会出现。 React 中导致过期闭包常见场景是什么,以及如何应对它们。...当你点击该组件中 "完成" 按钮时,就会触发这个回调。如果你想在点击时提交表单数据。这也很简单:只需将 title 和 onClick 这两个 props 传递给它即可。... React 中,我们一直都在创建闭包,甚至没有意识到,组件内声明每个回调函数都是一个闭包: const Component = () => { const onClick = () => {...我们 onClick值从未更新过,你能告诉我为什么吗? 当然,这又是一个过期闭包。当我们创建 onClick 时,首先使用默认状态值(undefined)形成闭包。...=== after.title && before.onClick === after.onClick ); }; 不过,在这种情况下,这意味着我们只是重新实现了 React 默认行为,

49440

React-组件state面试题

面试题内容为:setState 是同步还是异步:默认情况下 setState 是异步,如果想要验证一下默认情况是异步可以先来看如下这么一个栗子import React from 'react';...return ( ) }}export default App;如果如上示例当中点击了按钮之后输出值为...,就会造成重新渲染界面三次,这样就会造成页面的性能低下,那么在这里就是为什么 setState 是异步了,因为它会先收集一段时间内指令,然后依次执行完,这样就会只渲染页面一次这样性能就不会造成太大影响了...: 定时器中, 原生事件中,是同步import React from 'react';class Home extends React.Component { constructor(props...,来看看在原生事件当中情况下吧:import React from 'react';class Home extends React.Component { constructor(props

17010

React新文档:不要滥用Ref哦~

今天,我们来聊聊Ref使用场景。 为什么是逃生舱? 先思考一个问题:为什么ref、effect被归类到「逃生舱」中? 这是因为二者操作都是「脱离React控制因素」。...测量DOM尺寸 这些情况下,虽然我们操作了DOM,但涉及都是「React控制范围外因素」,所以不算失控。...如果这两种「移除P节点」方式混用,那么先点击「按钮1」再点击「按钮2」就会报错: 这就是「使用Ref操作DOM造成失控情况」导致。...究其原因,就是上面说「为了将ref失控范围控制单个组件内,React默认情况下不支持跨组件传递ref」。...总结 正常情况,Ref使用比较少,他是作为「逃生舱」而存在。 为了防止错用/滥用导致ref失控,React限制「默认情况下,不能跨组件传递ref」。

75520

精读《React — 5 Things That Might Surprise You》

A. 2 B. 1 ✔️ 点击demo 原因是我们状态更新期间,我们使用了之前状态值:setCounter(count + 1)。...本质上,setState函数被包装在功能组件闭包中,因此它提供了该闭包中捕获值。这意味着当它最终被执行时(setState函数是异步),它可能持有一个不再相关状态值。...异步函数中设置状态时也可能出现同样问题: onClick={() => { setTimout(() => { setCounter(counter + 1); ), 1000); }};...点击demo ❝函数式组件中我们可以使用ref存储静态变量 ❞ 3. React 可以强制重新挂载一个组件 写入DOM成本非常高。这就是为什么我们通常不想重新mount 组件,除非绝对必要。...那么在那种情况下,我们如何告诉 react 卸载并立即重新mount 组件?用一个简单技巧——为我们组件提供一个key,并改变它值。

1.1K20

前端一面react面试题总结

react16.0以后,componentWillMount可能会被执行多次。...react代理原生事件为什么?...(1)constructor组件构造函数,第一个被执行,若没有显式定义它,会有一个默认构造函数,但是若显式定义了构造函数,我们必须在构造函数中执行 super(props),否则无法构造函数中拿到...,就会触发一次额外渲染,多调用了一次 render 函数,由于它是浏览器刷新屏幕前执行,所以用户对此是没有感知,但是我应当避免这样使用,这样会带来一定性能问题,尽量是 constructor...React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook; React 函数组件中调用 Hook。那为什么会有这样限制呢?

2.8K30

React Hooks 快速入门与开发体验(一)

那什么是 React Hook 呢?官方介绍如下: Hook 是 React 16.8 新增特性。它可以让你在不编写 class 情况下使用 state 以及其他 React 特性。...并且官方保证它 没有破坏性改动: React Hook 是: 完全可选,可以轻松引入。如果你不喜欢,也可以不去学习和使用。 100% 向后兼容,React Hook 不会包含任何破坏性改动。...第二条很好理解,毕竟是为函数组件所设计,第一条究竟为何,没有实际体验也很难说清楚,我们容后再叙。 既然已经出来两年之久,这个 React Hook 实际使用起来究竟效果如何呢?...基础示例 比如一个简单点击计数示例,其中使用到一个计数 state,每次点击后将其 +1 后更新视图: import React, { Component } from 'react'; class...如果存在依赖数组,React 就会在每次副作用函数执行前,检查依赖数组中内容。当依赖数组与上次触发时完全没有变化,就会掉过此次执行。

1K30

React Ref 为什么是对象

,具体表现为 review.ref 为 article DOM 元素引用当用户点击下载图片 button,onClick 回调函数执行,完成预期下载操作。...因此, useDownload hook 被调用时刻,被传递参数 ref.current 很明显是 null,而在 ref.current 被更新时候,hook 传参却没有更新,即数据过期了。...}> 标题 内容 )}React 作用时序并没有变,变化是传给自定义hook 参数...,参数变成了完整 reviewRef 对象,而非精摘出来 reviewRef.current 值,当 onClick 回调被执行时,onClick 函数作用域 App 函数作用域上产生了闭包,读取到...到此为止我们已经可以呼应到本文主题了,ref 数据为什么设置成对象形式?DOM 元素为什么要通过 ref.current 点用?

1.5K20

React】1804- React 实现自动上报 pvclick 埋点 Hooks

可能是以下内容: 负责渲染视图获取状态 更新函数组件方法,本质上是 useState 或者 useReducer 一些传递给子孙组件状态 没有返回值 特性 首先我们要明白,开发者编写自定义 hooks...本质上就是一个函数,而且函数组件中被执行。...这是为什么呢? 这是因为更新过程中,如果通过 if 条件语句,增加或者删除 hooks,那么复用 hooks 过程中,会产生复用 hooks 状态和当前 hooks 不一致问题。...所以开发时一定要注意 hooks 顺序一致性。 实践 接下来我们来实现一个能够 自动上报 页面浏览量|点击时间 自定义 hooks -- useLog。...> 按钮 3 (内部点击) {/* 外部点击 */} <button onClick

29230

React最佳实践

状态逻辑复用 使用React Hooks之前,我们一般复用都是组件,对组件内部状态是没办法复用,而React Hooks推出很好解决了状态逻辑复用,而在我们日常开发中能做到哪些状态逻辑复用呢...下面我罗列了几个当前我项目中用到通用状态复用。 useRequest 为什么要封装这个hook呢?...,都会打印出columns发生了变化,而columns发生变化便意味着表格属性发生变化,表格会重新渲染,这时候如果表格数据量不大,没有复杂处理逻辑还好,但如果表格有性能问题,就会导致整个页面的体验变得很差...还是会在每次组件重新渲染时候被执行。...想了解为什么columns会发生变化,我们先了解一下react比较算法原理。 react比较算法底层是使用Object.is来比较传入state.

85350

React组件方法中为什么要绑定this

ES5写法中为什么不用bind(this)?...绑定this必要性 组件上绑定事件监听器,是为了响应用户交互动作,特定交互动作触发事件时,监听函数中往往都需要操作组件某个状态值,进而对用户点击行为提供响应反馈,对开发者来说,这个函数触发时候...如果不绑定this 如果类定义中没有绑定this指向,当用户点击动作触发this.handleClick( )这个方法时,实际上执行是原型方法,可这样看起来并没有什么影响,如果当前组件构造器中初始化了...} = toggleButton; 上例中解构赋值获取到handleClick这个方法执行时就会报错,Class内部是强制运行在严格模式下,此处this赋值中丢失了原有的指向,在运行时指向了...之所以说它是一个语言级缺陷,是因为Java中对于this同样场景下指向更符合正常思维逻辑,而javascript中如果不显示绑定,就会出现语言运行结果和方法命名表意不一致情况。

84430

升级React17,Toast组件不能用了

为什么只有挂载了Portal情况下bug能复现? 为什么该bug只v17复现? 该从哪条线索下手呢? v17有哪些变化? 相比第一、二条,第三条线索能更好控制影响范围。...以一个React组件onClick事件举例,当点击发生后,会依次执行: 「原生点击事件」向上冒泡 「原生点击事件」冒泡到根节点,触发addTrappedEventListener注册事件处理函数 「...合成事件」会在React组件树中从底向上冒泡 当「合成事件」冒泡到触发点击组件时,调用onClick方法 这就是React合成事件原理。...那么,为什么只有挂载了Portal情况下bug能复现? 难道Portal与合成事件有关?...当bug来临,没有一片feature是无辜。 现在,终于有点能体会为啥React团队开发Concurrent Mode相关功能花了2年多时间。

1.6K20
领券