React 基础面试题, 在 React 中,如何将参数传递给事件处理函数?

Step 1

Q:: 如何在 React 中将参数传递给事件处理函数？

A:: 在 React 中，可以通过箭头函数或 bind 方法将参数传递给事件处理函数。通过箭头函数，您可以直接在事件处理程序中传递参数，如下所示：

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

或者，您可以使用 bind 方法，将参数绑定到事件处理程序中：

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

。

Step 2

Q:: 在 React 中，如何防止事件冒泡？

A:: 在 React 中，您可以通过调用 event.stopPropagation() 方法来阻止事件冒泡。这意味着事件不会从子元素传播到父元素。例如：

 
<button onClick={(e) => {
 e.stopPropagation();
 console.log('Button clicked');
}}>Click me</button>
 

。

Step 3

Q:: React 中的事件处理与原生 HTML 事件处理有何不同？

A:: React 事件处理是通过合成事件系统（Synthetic Event System）来处理的，它是对浏览器原生事件的封装。React 的事件处理是跨浏览器一致的，这意味着在不同浏览器中不需要考虑事件处理的兼容性问题。此外，React 事件处理使用了驼峰命名法（camelCase），而不是小写，例如 onClick 而不是 onclick。