Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤 Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载  Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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

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 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

4 评论
zjhch123 • 2018-12-21
回复 删除
<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 里会直接报错

Vanessa • 2018-12-21
回复 删除

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

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

zjhch123 • 2018-12-24
回复 删除
Vanessa • 2018-12-24
回复 删除

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