ReactJS - 事件管理

事件只是用户与任何应用程序交互时执行的一些操作。它们可以是最小的操作，例如将鼠标指针悬停在触发下拉菜单的元素上、调整应用程序窗口大小或拖放元素以上传它们等。React 中的事件分为三类

鼠标事件 − onClick、onDrag、onDoubleClick
键盘事件 − onKeyDown、onKeyPress、onKeyUp
焦点事件 − onFocus、onBlur

对于这些事件中的每一个，JavaScript 都提供响应。因此，每次用户执行事件时，通常都需要应用程序做出某种类型的反应；这些反应被定义为一些函数或代码块，称为事件处理程序。使用事件处理程序处理事件的整个过程称为事件管理。

ReactJS 中的事件管理

事件管理是 Web 应用程序中的重要功能之一。它使用户能够与应用程序交互。React 支持 Web 应用程序中可用的所有事件。React 事件处理与 DOM 事件非常相似，只有细微的差别。以下是可以在基于 React 的网站上观察到的一些常见事件：

单击组件。
滚动当前页面。
将鼠标悬停在当前页面的元素上。
提交表单。
重定向到另一个网页。
加载图像。

合成 React 事件

在 JavaScript 中，当指定事件时，您将处理称为合成事件的 React 事件类型，而不是常规 DOM 事件。SyntheticEvent 是本机事件实例的简单跨浏览器包装器，使事件在所有浏览器中都能以相同的方式工作。所有事件处理程序都必须作为此包装器的实例传递。但是，就 CPU 资源而言，它成本很高，因为每个创建的合成事件都需要进行垃圾回收。每个合成事件对象都具有以下属性：

布尔值 bubbles
布尔值 cancelable
DOMEventTarget currentTarget
布尔值 defaultPrevented
数字 eventPhase
布尔值 isTrusted
DOMEvent nativeEvent
void preventDefault()
布尔值 isDefaultPrevented()
void stopPropagation()
布尔值 isPropagationStopped()
void persist()
DOMEventTarget target
数字 timeStamp
字符串 type

由于合成事件使用了大量资源，因此它们通常会被重用，并且在调用事件回调后，其所有属性都将被清除，以优化其在浏览器中的性能。SyntheticEvent 与本机事件具有相同的接口。由于合成事件由文档节点授权，因此先触发本机事件，然后触发合成事件。

添加事件

正如我们已经看到的，React 具有与 HTML 相同的事件：click、change、mouseover 等。但是，React 事件是用 camelCase 定义的，反应写在花括号内。添加事件的语法在函数式组件和类组件中有所不同。

以下是向 React 函数式组件添加 onClick 事件的语法

onClick = {action to be performed}

以下是向 React 类组件添加 onClick 事件的语法

onClick = {this.action_to_be_performed}

处理事件

现在让我们学习如何通过以下分步过程在 React 应用程序中处理这些事件。

定义一个事件处理程序方法来处理给定的事件。

log() { 
   console.log("Event is fired"); 
}

React 提供了一种使用 lambda 函数定义事件处理程序的替代语法。lambda 语法为：

log = () => { 
   console.log("Event is fired"); 
}

向事件处理程序传递参数

有两种方法可以向事件处理程序传递参数

箭头方法
绑定方法

箭头方法

如果要了解事件的目标，则在处理程序方法中添加参数e。React 将把事件目标详细信息发送到处理程序方法。

log(e) { 
   console.log("Event is fired"); 
   console.log(e.target); 
}

替代 lambda 语法为：

log = (e) => { 
   console.log("Event is fired"); 
   console.log(e.target); 
}

如果要在事件期间发送额外的详细信息，则将额外详细信息作为初始参数添加，然后为事件目标添加参数(e)。

log(extra, e) { 
   console.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

替代 lambda 语法如下：

log = (extra, e) => { 
   console.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

绑定方法

我们还可以将事件处理程序方法绑定到组件的构造函数中。这将确保在事件处理程序方法中可以使用this。

constructor(props) { 
   super(props); 
   this.logContent = this.logContent.bind(this); 
}

如果事件处理程序是在替代 lambda 语法中定义的，则不需要绑定。this 关键字将自动绑定到事件处理程序方法。

为特定事件设置事件处理程序方法，如下所示：

<div onClick={this.log}> ... </div>

要设置额外参数，请绑定事件处理程序方法，然后将额外信息作为第二个参数传递。

<div onClick={this.log.bind(this, extra)}> ... </div>

替代 lambda 语法如下：

<div onClick={this.log(extra, e)}> ... </div>

这里：

打印页面