与原生 DOM 事件有语法上的区别

命名与传值

React 事件采用小驼峰命名,而不是纯小写。其实,在 React 中有不少属性是采用小驼峰命名的,如 className。大家理解为原生 Javascript 的语法糖就好了。

传统 HTML 的 onclick 属性是纯小写,并传入一个字符串做为事件处理函数。

<button onclick="clickHandler()">Click me</button>

React 元素的 onClick 是小驼峰,且传入的是一个函数,并非字符串。

<button onClick={clickHandler}>Click me</button>

阻止默认行为

React 无法通过 return false 来阻止默认行为,必须显式的使用 e.preventDefault 来阻止。

React 会默认传事件处理函数传入一个合成的事件(e),合成事件是完全根据 W3C 规范定义的。

参数传递

通常情况下我们会向事件处理函数传递额外的参数,例如在列表循环中,我们需要传递 id 用于告知事件处理函数如何处理。

1.通过箭头函数,事件对象 e 必须通过第二个参数显式传入

<button onClick={(e) => this.clickHandler(id, e)}>Click me</button>

2.通过 Function.prototype.bind ,事件对象及更多的参数将通过隐式传入

<button onClick={this.clickHandler.bind(this, id)}>Click me</button>

在这里,id 是第一个参数,事件对象 e 并没有显式传入,而是第为第二个参数,隐式传入。

标签: React

添加新评论