首页 > 其他 > 详细

React之事件处理

时间:2019-03-20 00:53:00      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:fault   undefine   性能问题   一个   nbsp   color   app   vue   style   

在react中,事件处理的写法和处理方式可能会和vue以及传统html有些不同。

一、事件名和默认行为阻止

事件名采用驼峰写法,并且方法名用大括号引入,而不是双引号:

<button onClick={activateLasers}>
  Activate Lasers
</button>

对于类似a标签的默认跳转事件:

handleClick(e) {
    e.preventDefault();
    console.log(The link was clicked.);
}
return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
);

二、绑定事件

技术分享图片

由于作用域的问题,tick函数得卸载外面,这样一来,也就不能操作App这个类下面的所有属性以及事件了。so,那就放里面?

技术分享图片

哈哈,undefined,对此解决方法有三种:

①手动绑定this

技术分享图片

②采用属性初始化器语法

技术分享图片

 ③性能问题的第三种

onClick={(e) => this.handleClick(e)}

使用这个语法有个问题就是每次组件渲染的时候都会创建一个不同的回调函数。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

React之事件处理

标签:fault   undefine   性能问题   一个   nbsp   color   app   vue   style   

原文:https://www.cnblogs.com/eco-just/p/10562407.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号