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 秒