React 和 HTML 的事件处理有什么不同?

本贴最后更新于 1882 天前,其中的信息可能已经水流花落

2018-12-21

回答

主要区别如下:

  • 在 HTML 中,事件名称使用小写,而 React 中使用驼峰命名。
<!-- HTML -->
<button onclick="handleClick()"> 
/* React */
<button onClick="handleClick()"> 
  • 在 HTML 中,阻止事件的默认行为使用 return false,而 React 中必须调用 preventDefault
<!-- HTML -->
<button onclick="console.log('The link was clicked.'); return false"> 
/* React */
function handleClick(e) {
    e.preventDefault()
} 

加分回答

  • 如果采用 JSX 的语法的话你需要传入一个函数,并且需注意 this 和传参与 HTML 的差异原理。
const deleteRow = (id) => (event) => {  
    console.log(id, event)
}
getTableId = (event) => {  
    console.log(this.state.tableId, event);  
}
<button onClick={deleteRow(id)}>Delete Row</button>
<button onClick={this.getTableId}>Delete Row</button>
  • React 中的事件机制分为两个阶段:事件注册、事件分发。所有的事件都会注册到 document 上,然后使用统一的回调函数 dispatchEvent 来执行分发。

返回总目录

每天 30 秒

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 10 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 450 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • zjhch123 1
    <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>  # 写法1 
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> # 写法2
    

    这两种写法都不够优雅,会在创建事件的时候返回新函数,

    我感觉还是在 constructorthis.deleteRow = this.deleteRow.bind(this) 一下,然后再在 jsx 里使用比较好。

    或者干脆在类中这样定义

    deleteRow = () => {
      // TODO
    }
    

    但是具体好到什么地步,能节省多少性能,这个我也没有具体体验过。如果就方便而言,我反而还更喜欢写法 1 一点

    还有一种黑科技写法好像是

    <button onClick={this::deleteRow}>Delete Row</button> 
    

    写法看起来很优雅,但是 VSCode 里会直接报错

    1 回复
  • Vanessa

    函数内不需要使用 this 和参数的话直接写函数名,否则我一般用第二种。
    :: 是 ES7 语法了,修改下 JavaScript language version 试试。

    话说创建时返回新函数是啥意思?研究不够深入,不太明白。

  • zjhch123 1
    1 回复
  • Vanessa

    哇,感觉又学到了新知识。这两种写法在 render 的时候进行比对发现虚拟 DOM 事件的函数地址不一样,就会重新在 RAM 内开辟一块出来。如果在 Class 外使用箭头函数来解决参数,在 Class 内使用箭头函数来解决 this 问题就可以避免了。但是官网上为啥给的是这个例子呢?我去更新下文档。

Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明