Ï

React学习笔记——事件处理(v15.5)

    Reactl事件和Dom事件非常相似,但他们也有一些语法上的不同:

    1、React事件使用的是驼峰命名,而不是小写

    2、JSX传递给事件的是一个函数,而不是字符串

    另一个区别是React不能返回false,以阻止默认行为。你必须明确的调用preventDefault。如下面一个简单的HTML,阻止一个超链接打开一个页面的行为:

    而在React中的写法如下:

    此处,e是一个合成事件。React定义的合成事件遵循W3c规范,因此不需要考虑浏览器兼容性。

    在React中使用事件通常不需要调用addEventListener方法,如下:

    上面代码必须注意到回调函数中的this关键字,JavaScript中类中的方法没默认值,如果不在构造函数中声明this.handleClick,回调函数中的this取值为undefined

    如果感觉调用bind函数令人讨厌,有两种方法绕过此种写法:

    1、使用ES7的实例属性,初始化设置回调函数

    2、使用箭头函数

    这种语法的问题在于,每次渲染LogginButon组件时,都创建了不同的回调函数。大多数情况,这种方式是没有问题的。但是,如果这个回调函数作为prop被传递到下游组件,那么那些组件可能额外重新加载。通常推荐用构造函数方式或者实例属性方式来避免这些性能问题。

    转载请注明:风尘 » React学习笔记——事件处理(v15.5)

    喜欢 0

还没有人抢沙发呢~