React 基础面试题, 如何在 React 中创建一个事件?
React 基础面试题, 如何在 React 中创建一个事件?
QA
Step 1
Q:: 如何在 React 中创建一个事件？
A:: 在 React 中，事件处理程序可以直接在 JSX 语法中定义。你可以通过在组件的元素上添加类似 onClick、onChange 这样的事件属性来绑定事件处理程序。比如，在一个按钮上绑定点击事件：<button onClick={this.handleClick}>点击我</button>。这里的 handleClick 是一个在组件类中定义的方法，负责处理点击事件。
Step 2
Q:: React 中事件处理和原生 HTML 事件处理有什么区别？
A:: React 的事件处理与原生 HTML 事件处理的主要区别在于：1) React 使用的是合成事件系统，这意味着 React 会将所有事件委托到最顶层的根元素，并且会使用事件池来复用事件对象，提升性能。2) 在 React 中，事件名称使用 camelCase 格式，而不是小写。例如，onclick 在 React 中写作 onClick。3) 在 React 中，事件处理函数通常是类的方法或使用 useState、useCallback 等 Hook 管理的函数，并且默认情况下绑定的 this 指向组件实例。
Step 3
Q:: 在 React 中如何防止事件冒泡？
A:: 你可以通过调用事件对象的 stopPropagation() 方法来阻止事件冒泡。例如，在点击事件的处理函数中调用 e.stopPropagation() 可以防止事件从子元素冒泡到父元素。
Step 4
Q:: 如何在 React 中传递事件参数？
A:: 在 React 中，传递事件参数通常有两种方式：1) 直接在事件处理程序中使用箭头函数，如：<button onClick={() => this.handleClick(id)}>点击我</button>。2) 使用 bind 方法预先传递参数，如：<button onClick={this.handleClick.bind(this, id)}>点击我</button>。