React & event-pooling & bug
React & event-pooling & bug
event-pooling
https://reactjs.org/docs/events.html#event-pooling
https://reactjs.org/docs/events.html#mouse-events
https://reactjs.org/docs/events.html#form-events
old
// old
result = (
<Input
// unique key
key={type}
value={Filter_Value}
onChange={that.onFilterValueChange}
// onChange={(e) => that.onFilterValueChange}
placeholder={placeholder}
/>
);
new
// new
result = (
<Input
// unique key
key={type}
value={Filter_Value}
onChange={(e) => that.onFilterValueChange(e)}
// onChange={(e) => that.onFilterValueChange}
placeholder={placeholder}
/>
);
bug
react & Warning: This synthetic event is reused for performance reasons.
binding bug & event Bubble ???
// 1. change below
onChange={this.handleCheckbox}
// to
onChange={() => this.handleCheckbox}
// 2. If that won't work, in 'handleCheckbox' add this line
handleCheckbox = (event) => {
event.persist();
this.setState({
isChecked: !this.state.isChecked
});
};
I think the is that when using an array.map() function will create many same items if the item without a unique key, React couldn't tell which one child triggered the event, so it may be coursed a crash. Therefore, using ES6 arrow function will auto bind this to the unique one item.
我认为, 当使用 "array. map ()" 函数将创建许多相同的项目, 如果没有唯一的键的项目, 反应无法判断哪个孩子触发了事件, 所以它可能会导致崩溃。 因此, 使用 es6 箭头函数将自动绑定 "此" 到唯一的一个项目。
solutions
https://www.duncanleung.com/blog/2017-08-14-fixing-react-warnings-synthetic-events-in-setstate/
https://stackoverflow.com/questions/42089795/reactjs-cant-set-state-from-an-event-with-event-persist
React & event-pooling & bug的更多相关文章
- React event
React event 组件: React 自有方法 用户定义方法 一.虚拟事件对象 事件处理器将会传入 虚拟事件对象 的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法 ...
- React & `event.persist()`
React & event.persist() event.persist() https://reactjs.org/docs/events.html#event-pooling Tabs ...
- React render twice bug
React render twice bug React bug constructor render twice bug update render twice bug StrictMode htt ...
- taro 小程序 & touch event 转换 bug
taro 小程序 & touch event 转换 bug before after 事件处理 https://nervjs.github.io/taro/docs/event.html#do ...
- React使用笔记(3)-React Event Listener
Date: 2015-11-28 12:18 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1. 构造基本结构 首先,我们先创建一个按钮,一个输入框 ...
- React——event
1.绑定在React元素上的事件与绑定在DOM元素上的事件非常相似,但是也有一个不同的地方 React事件使用驼峰命名法命名 //在HTML中 <button onclick='handle() ...
- React 17 All In One
React 17 All In One v17.0.1 https://reactjs.org/blog/2020/10/20/react-v17.html https://reactjs.org/b ...
- react与jQuery对比,有空的时候再翻译一下
参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...
- ANGULAR 2 FOR REACT DEVELOPERS
Now that Angular 2 is in beta, the time has come for us to drop everything and learn something new, ...
- React 介绍
ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind The sm ...
随机推荐
- 使用JAX-WS(JWS)发布WebService(一)
JAX-WS概述: 通过Main发布一个简单WebService: JAX-WS(Java API for XML Web Services)规范是一组XML web services的JAVA AP ...
- 汇编指令lodsb和stosb、lodsd和stosd
lodsb指令,将esi指向的地址处的数据取出来赋给AL寄存器,esi=esi+1: lodsw指令则取得是一个字. lodsd指令,取得是双字节,即mov eax,[esi],esi=esi+4: ...
- MySql 使用explain分析查询
今天写了个慢到哭的查询,想用explain分析下执行计划,后来发现explain也是有局限性的: EXPLAIN不会告诉你关于触发器.存储过程的信息或用户自定义函数对查询的影响情况 •EXPLAIN不 ...
- MAC 更新brew 镜像源
mac 更新brew镜像源 cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core" git remote set-url o ...
- XSS--编码绕过,qcms,鲶鱼cms
一.编码绕过 1)HTML进制编码 标签中的某些属性值可以使用html十进制.十六进制表示 2)JavaScript编码 JavaScript支持unicode.八进制.十六进制.十进制等 3)URL ...
- centos下php环境安装redis
一.安装redis(仅可在服务器使用,尚不能通过浏览器访问) (1)首先下载redis:wget http://download.redis.io/releases/redis-4.0.9.tar.g ...
- lesson 14 A noble gangster
lesson 14 A noble gangster there was a ++time++ 时期 times 时期/年代 in times of peace a sum of + money 一笔 ...
- Unity编辑器 - 资源修改立即写入磁盘AssetDataBase.SaveAssets()
Unity编辑器 - 资源修改立即写入磁盘AssetDataBase.SaveAssets() 在编写编辑器时,如果需要修改Unity序列化资源(如Prefab,美术资源,ScriptableObje ...
- 【token接口】-jmeter
token 接口 3步骤 1.登录接口 2.提取登录接口的token 3.http 信息管理头 把提取的cookie传入 就可以了
- 小程序开发中,纯css实现内容收起折叠功能
不多说,直接上代码: wxml页面: <!--收起折叠 begin--> <view style='width:100%;background:#fff;border-top:1px ...