ReactJS - 事件管理

上一页
下一页

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

React 中的事件分为三类：

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

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

ReactJS 中的事件管理

事件管理是 Web 应用程序中的重要功能之一。它使用户能够与应用程序进行交互。React 支持 Web 应用程序中可用的所有事件。React 事件处理与 DOM 事件非常相似，只是几乎没有什么变化。

以下是在基于 React 的网站上可以观察到的一些常见事件：

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

合成 React 事件

在 JavaScript 中，当指定了一个事件时，你将处理一种称为合成事件的 react 事件类型，而不是常规的 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 事件是用 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");	
}

将参数传递给事件处理程序

有两种方法可用于将参数传递给事件处理程序：

  • Arrow 方法
  • Bind 方法

Arrow 方法

如果你想知道事件的目标，那么在处理程序方法中添加一个参数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);	
}

Bind 方法

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


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

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

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


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

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


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

备用 lambda 语法如下 -


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

这里

打印本页
上一页
下一页