ReactJS – 事件管理

Posted on by

事件管理是 Web 应用程序中的重要功能之一。它使用户能够与应用程序进行交互。React 支持 Web 应用程序中可用的所有事件。React 事件处理与 DOM 事件非常相似，几乎没有变化。让我们在本章学习如何在 React 应用程序中处理事件。

让我们看看在 React 组件中处理事件的分步过程。

  • 定义一个事件处理方法来处理给定的事件。
log() { 
   cosole.log("Event is fired"); 
}

React 提供了另一种语法，使用 lambda 函数来定义事件处理程序。lambda 语法是 –

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

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

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

另一种 lambda 语法是 –

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

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

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

替代的 lambda 语法如下 –

log = (extra, e) => { 
   cosole.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>

这里，

  • 创建事件感知组件
  • 在费用管理器应用程序中介绍事件

推荐阅读：