ReactJS - 事件管理

---

事件管理是 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); 
}

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

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>

这里，

• 创建事件感知组件

• 在费用管理应用程序中引入事件