QuikieApps

反应事件:关于它的一切无所适从

反应事件简介:

JavaScript可以响应的动作称为事件。例如:即使您单击一个按钮,然后单击该按钮也是一个事件。单击按钮后,该按钮将要执行的任务由事件处理程序分配。

其他常用事件如下:

因此,有关事件的基本思路很明确。使用JavaScript的开发人员必须熟悉这些术语,以使他们理解起来并不困难也不陌生。因此,基本上,事件是可以触发的某种操作,可能是用户操作或系统生成的事件的结果。事件示例如下:加载网页,单击鼠标,调整窗口大小,按下键以及更多的交互称为事件。

反应中的事件处理: 

使用React元素处理事件与处理DOM元素上的事件非常相似。有一些语法上的差异:

 

在HTML中,我们编写事件如下:

<按钮onclick =“ handleClick()”>Click Me</button>

 

在React中,我们编写事件如下:

<按钮onClick = {handleClick}>Click Me</button> //作为功能组件

<按钮onClick = {this.handleClick}>Click Me</button> //作为类组件

 

一个人不能回来 防止React的默认行为。我们必须打电话 preventDefault 明确地。例如:

 

在HTML中:

<a href =“#” onclick =” console.log('Clicked。');返回假”> Click me </a>

 

在React中: 

函数handleClick(e){

e.preventDefault();

console.log(点击)。

}

 

<a href =“#” onClick = {handleClick}> Click me </a> 

如果事件由React处理,则称为 综合事件。 合成事件实际上是浏览器本地事件的跨界包装。  

就像在任何其他框架中一样,在React中,如果没有事件处理程序,我们将无法创建令人惊叹的,响应式和交互式的Web应用程序,该应用程序将在每次触摸时对用户做出响应。事件处理是React的一个非常重要的部分,因为它可以确保React跟踪用户执行的每个动作。这些操作可能包括调整窗口大小,滚动浏览页面,甚至单击链接都由事件处理程序处理和检测。 

反应事件列表:

下面的事件处理程序由冒泡阶段中的事件触发。为了为捕获阶段注册一个事件处理程序,例如,将Capture附加到事件名称之后:代替使用onClick,我们必须使用onClickCapture来处理捕获阶段的click事件。事件属性称为 onClick 传递给称为 clickHandler。 

综合事件:

对于每个事件,React还会创建一个 综合事件 可以传递给回调函数或事件处理程序,也可以包含事件的详细信息。 

定义事件:

为了在JSX中定义事件,我们需要添加camelCased事件以及相应的事件处理程序或回调函数,作为表示React元素的JSX属性之一:

那里的括号用于将那些事件连接到它们各自的事件属性。但是,它们不会在DOM中创建内联事件。 

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

最常见的是,开发人员希望在循环内将额外的参数传递给事件处理程序。例如:让我们假设 ID 是行ID,则可以使用以下任何一种方法:

上面的两行是等效的并且可以互换,并且两者都使用 

Function.prototype.bind 以及  Arrow 功能。在上述两种情况下, e 那里代表一个React事件的对象将作为第一个参数之后的第二个参数传递 ID。 虽然使用箭头功能,我们需要显式传递它,但是我们可以看到 捆绑 与结合使用时,任何其他自变量都会自动转发。 

我们在应用程序中可以看到的大多数行为都围绕事件。事件可以通过多种方式触发,我们构建应用程序以监听事件,以便为事件做其他事情。根据事件的JavaScript经验,在处理事件时可能会感到很自在,但是React具有一种非常不同且独特的事件处理方式。 反应并没有直接针对DOM事件,而是将它们包装在自己的事件包装器中,但稍后可以讨论。现在让我们看看如何实际创建,添加和监听React事件。

创建事件:

让我们首先创建一个具有输入和按钮的表单。此后,输入值时必须触发一个事件,并且该按钮的用途是调用将反转该值的函数。应该包括的内容是:

侦听组件事件:

我们知道我们只能监听DOM元素上的事件。在本文的开头,我们已经谈到了这个主题,但是我们知道React的组件是DOM元素的包装器,这意味着我们已经有了一个侦听事件所需的传递层。克服这种障碍的方法将通过事件

处理程序作为子组件的道具,然后,该道具作为属性传递给click事件。 

添加事件监听器:

在某些时候,我们可能想利用某些DOM事件,这些事件在安装组件时触发。当我们希望在每次调整窗口大小时都看到窗口的宽度时,可以举一个resize事件的例子。如果我们要创建一个组件并进行尝试,则需要添加事件侦听器:handleResize()和我们拥有的事件类型。然后,在安装组件时将添加事件侦听器,这意味着我们制作的组件正在积极侦听浏览器窗口,并且在更新组件时将显示宽度。

结论:

我们已经对React事件的各个方面进行了相当多的介绍,但是涉及到使用React开发的广阔空间。在这里,我们还了解到,React并不直接连接到DOM事件,而是有一些为DOM事件包装的Synthetic事件。我们还深入研究了创建新事件监听器的过程,以便将它们附加到全新的Synthetic事件上,并确保从那里开始,当这些特定事件被触发时,组件将得到更新。本文涵盖了初学者级别所需的所有关于React事件的必要主题,还涵盖了一些概念,这些概念将帮助您提高理解水平。希望本文对您有所帮助,并且您可以使用React开发出色的应用程序。

 

Exit mobile version