事件简介
事件是用户和应用程序之间的某种类型的互动，用户执行了一些动作，导致应用程序的一些反应。当用户点击、拖放、填写输入框或在一个元素上悬停时，都会发生事件。我们作为开发者定义了响应所发生事件的函数。这些函数是事件处理程序，它们是事件管理系统的核心。事件管理实际上是用于处理此类事件的一套技术。
在这篇文章中，我们将研究React中事件管理的概念，我们还将看到不同类型的事件和处理这些事件的技术。
React和HTML事件处理之间的差异
如果你正在使用react，你很可能对javascript中的DOM事件非常熟悉。
事件管理的基本思想是，我们定义一些处理函数，对发生的事件作出反应。
这是一个 onclickDOM事件，当按钮上发生点击事件时，会触发 handleClick( )函数，这个基本思想在javascript和React中是通用的，但有一些细微的差别使它们不同。
React和HTML的事件处理在语法和一些规则上是不同的。这背后的原因是，HTML可以一直访问真实的DOM，而React则遵循虚拟DOM的概念。让我们看看我们如何在HTML中添加事件，以及React的事件处理与HTML有什么不同。
在HTML中，有两种处理事件的方法，要么指定javascript函数，要么使用javascript的addEventLisener来指定事件和监听器。
在这里，我们创建了两个按钮，每当用户点击该按钮时，就向用户问候早安。对于第一个按钮，我们使用第一个方法 "onclick "来指定事件，并将"wish( ) "作为一个字符串与括号一起放在最后。正如你所看到的，在第二个按钮上，我们指定的是id。我们正在使用第二个方法，即addEventListener，我们已经提供了点击事件并给出了回调。
在React中，由于我们使用虚拟DOM的概念，所以我们需要在创建组件时指定所有的事件。这里我们定义了事件"onClick"，用驼峰大写，并提供了一个方法名，而不是一个字符串。由于React使用JSX，所以我们需要用大括号（{ }）指定方法。
**注意：**这里我们没有在大括号内调用wish函数，像{ wish( ) }这样的调用将在每次元素被渲染时调用处理程序。
HTML和React的事件管理的主要区别。
| 在HTML中 | 在ReactJS中 |
|---|---|
| 我们使用正常的约定来指定事件，如 "onclick"，"onsubmit"。 | 在ReactJS中，我们使用骆驼的大小写习惯来指定事件，如 "onClick", "onSubmit"。 |
| 事件监听器是以字符串的形式提供的。 | 我们以函数名或方法名的形式提供或绑定监听器作为一个变量。 |
| 倾听者在 | |
| 结尾处有括号（ ），以便工作。 | 我们只提供一个函数或方法名，提供( )将在元素的每次重新渲染时调用该方法。 |
| 事件可以在之后使用addEventListener添加。 | 所有的事件都是在创建组件的时候指定的。 |
表。HTML和ReactJS中事件处理的主要区别
功能组件中的事件处理
在功能组件中，处理程序被作为一个属性传递给元素或组件。当用户与元素进行交互时，该属性会收到一个函数。
处理onClick事件
当用户点击元素时，点击事件被触发，用户点击多少次，函数就被调用多少次。让我们看一个例子。
这将记录"Hello user !很高兴见到你"，事件发生多少次就在控制台记录多少次。
向事件传递参数
为了传递值或参数，我们必须使用一个实际的函数或箭头函数来传递值给该函数。让我们看一个向处理程序传递数值的例子。
处理onSubmit事件
有时你会发现自己处于一种需要阻止浏览器的默认行为的情况。例如，JavaScript的 "onsubmit "事件。默认行为是发送表单数据并重新加载网页。但有时我们可能想阻止这种默认行为。JavaScript有一个相当方便的技巧来做到这一点。
在这里，我们以通常的方式定义了处理函数，但有一个返回false的小技巧。这实际上是JavaScript防止默认行为的方法。如果我们不把这个return false放进去，网页就会在控制台有机会记录信息之前重新加载。
React不支持这个技巧，为了防止浏览器的默认行为，我们必须明确地调用preventDefault函数。
我们必须使用preventDefault( )方法来防止网页在表单提交时发送数据后重新加载。
React onChange vs HTML onchange
在React中，只要用户输入任何东西，就会触发"onChange "事件，并在用户每次输入时调用处理函数。它的行为类似于HTML中的 "oninput "事件。然而，HTML的"onchange "事件与React的onChange事件的概念完全不同。
在HTML中， "onchange "事件是在输入失去焦点时触发的，而不是在每个输入上。它的行为与React中的"onBlur "事件相同，当输入失去焦点时，处理函数被调用。
这两者之间的主要区别在上面的例子中很明显。
然而，React的 "onInput "和HTML的 "oninput "事件之间没有区别。
让我们看看这些事件之间的清晰比较。
结论
我们在这篇文章中看到，React和Javascript中的事件管理非常相似，只是在语法和传播方面有一些区别。在Reacts中还有很多事件可以用处理"onClick "事件的方式来处理。
