ReactJS - 事件管理
事件只是用户与任何应用程序交互时执行的一些操作。它们可以是最小的操作，例如将鼠标指针悬停在触发下拉菜单的元素上、调整应用程序窗口的大小或拖放元素以上传它们等。React 中的事件分为三类:
鼠标事件 − onClick、onDrag、onDoubleClick
键盘事件 − onKeyDown、onKeyPress、onKeyUp
焦点事件 − onFocus、onBlur
对于这些事件中的每一个，JavaScript 都会提供响应。因此，每次用户执行事件时，通常都需要应用程序做出某种类型的反应;这些反应被定义为一些函数或代码块，称为事件处理程序。使用事件处理程序处理事件的整个过程称为事件管理。
ReactJS 中的事件管理
事件管理是 Web 应用程序中的重要功能之一。它使用户能够与应用程序交互。React 支持 Web 应用程序中可用的所有事件。React 事件处理与 DOM 事件非常相似，只有很小的变化。以下是在基于 React 的网站中可以观察到的一些常见事件 −
单击组件。
滚动当前页面。
将鼠标悬停在当前页面的元素上。
提交表单。
重定向到另一个网页。
加载图像。
合成 React 事件
在 JavaScript 中，当指定事件时，您将处理称为合成事件的反应事件类型，而不是常规 DOM 事件。SyntheticEvent 是一个简单的跨浏览器包装器，用于本机事件实例，使事件在所有浏览器中的工作方式相同。所有事件处理程序都必须作为此包装器的实例传递。但是，由于创建的每个合成事件都需要进行垃圾收集，因此 CPU 资源消耗较大。每个合成事件对象都具有以下属性:
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type
由于合成事件使用大量资源，因此通常会重复使用它们，并且在调用事件回调后其所有属性都将被取消，以优化其在浏览器中的性能。 SyntheticEvent 具有与本机事件相同的接口。由于合成事件由文档节点授权，因此会先触发本机事件，然后再触发合成事件。
添加事件
正如我们已经看到的，React 具有与 HTML 相同的事件:单击、更改、鼠标悬停等。但是，React 事件使用驼峰式命名法定义，而反应则写在花括号内。在功能组件和类组件中添加事件的语法有所不同。
以下是在 React 的功能组件中添加 onClick 事件的语法:
onClick = {要执行的操作}
以下是在 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>
这里，
