React - 事件管理

Quiz

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

Mouse Events − onClick, onDrag, onDoubleClick
Keyboard Events − onKeyDown, onKeyPress, onKeyUp
Focus Events − onFocus, onBlur

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

ReactJS 中的事件管理

事件管理是 Web 应用程序的重要特性之一。它使用户能够与应用程序交互。React 支持 Web 应用程序中所有可用的事件。React 事件处理与 DOM 事件非常相似，只是略有不同。以下是一些在基于 React 的网站中常见的可观察事件 −

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

Synthetic React Events

在 JavaScript 中，当指定一个事件时，您将处理一种称为 synthetic event 的 React 事件类型，而不是常规的 DOM 事件。SyntheticEvent 是原生事件实例的简单跨浏览器包装器，使事件在所有浏览器中以相同方式工作。所有事件处理器必须作为此包装器的实例传递。然而，由于 CPU 资源消耗较大，每创建的 synthetic event 都需要进行垃圾回收。每个 synthetic event 对象具有以下属性：

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

由于 synthetic events 使用大量资源，它们通常会被重用，并在调用事件回调后将其所有属性置为空，以优化浏览器中的性能。SyntheticEvent 具有与原生事件相同的接口。而且，由于 synthetic events 由文档节点授权，原生事件会先触发，然后是 synthetic events。

添加事件

正如我们已经看到的，React 具有与 HTML 相同的事件：click、change、mouseover 等。然而，React 事件使用 camelCase 命名，并且反应写在花括号内。在 functional component 和 class component 中添加事件的语法有所不同。

以下是在 React 的 functional component 中添加 onClick 事件的语法：

onClick = {action to be performed}

以下是在 React 的 class component 中添加 onClick 事件的语法：

onClick = {this.action_to_be_performed}

处理事件

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

定义一个事件处理器方法来处理给定事件。

log() { 
   console.log("事件被触发"); 
}

React 提供使用 lambda function 定义事件处理器的替代语法。lambda 语法为 −

log = () => { 
   console.log("事件被触发"); 
}

向事件处理器传递参数

向事件处理器传递参数有两种方法：

箭头函数方法
Bind 方法

箭头函数方法

如果您想知道事件的 target，则在处理器方法中添加参数 e。React 会将事件 target 的详细信息发送到处理器方法。

log(e) { 
   console.log("事件已触发"); 
   console.log(e.target); 
}

替代的 lambda 语法如下 −

log = (e) => { 
   console.log("事件已触发"); 
   console.log(e.target); 
}

如果您想在事件中发送额外细节，则将额外细节作为初始参数添加，然后添加参数 (e) 用于事件 target。

log(extra, e) { 
   console.log("事件已触发"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

替代的 lambda 语法如下 −

log = (extra, e) => { 
   console.log("事件已触发"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

Bind 方法

我们也可以在组件的 constructor 中绑定事件处理器方法。这将确保事件处理器方法中 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>

这里，

创建一个事件感知组件
在 Expense manager app 中引入事件

笙亿网络策划

React 事件怎么管理？

React - 事件管理

ReactJS 中的事件管理

Synthetic React Events

添加事件

处理事件

向事件处理器传递参数

箭头函数方法

Bind 方法

React 事件怎么管理？

React - 事件管理

ReactJS 中的事件管理

Synthetic React Events

添加事件

处理事件

向事件处理器传递参数

箭头函数方法

Bind 方法

相关问答