如何在 React 中创建事件？

我们今天创建的每个现代网页都倾向于进行用户交互。当用户与 Web 应用程序交互时，会触发事件。该事件可以是鼠标单击、按键或一些罕见的事情，例如将电池与充电器连接。从开发人员的角度来看，我们需要“监听”这些事件，然后让我们的应用程序做出相应的响应。这称为事件处理，它为网页提供动态界面。与 JavaScript DOM 一样，React 也为我们提供了一些内置方法来创建相应地响应特定事件的侦听器。

现在我们将看看在 React 中创建事件时要记住的某些规则。

camelCase 约定：我们使用 camelCase 代替小写，同时给出反应事件的名称。这只是意味着我们写'onClick' 而不是“点击”。
将事件作为函数传递：在 React 中，我们将用大括号括起来的函数作为事件侦听器或事件处理程序传递，这与 HTML 不同，我们将事件处理程序或事件侦听器作为字符串传递。
防止默认：在 JSX 元素中返回 false 并不会阻止 react 中的默认行为。相反，我们必须直接在事件处理函数内部调用“ preventDefault”方法。

句法：

function Component(){
 doSomething(e){
   e.preventDefault();
   // Some more response to the event
 }
return (
   
 );
}

看了上面的语法，现在肯定有一个问题，'e'对象是什么，从哪里来的。实际上，“e”是一个合成事件。这是一个使用围绕浏览器实际事件的包装器制作的对象。这个对象是跨浏览器的。

创建反应应用程序：

Step1：使用以下命令创建一个 React 应用程序：
```
npx create-react-app name_of_the_app
```
第 2 步：创建 react 应用程序后，使用以下命令根据您的应用程序名称移动到目录：
```
cd name_of_the_app
```

项目结构：现在在编辑器中打开您的应用程序文件夹。您将看到以下文件结构：

方法：现在根据以下步骤修改源代码目录中的默认 App.js 文件：

确保已导入 React。并导入“App.css”文件，因为它包含应用程序组件的一些 CSS 样式。
使用 'className' App 清除
中写入的所有内容。
在这个 div 中创建一个标题和一个按钮。
在按钮内创建一个 onClick 事件并在其中传递“eventHandler”函数。我们在“App”组件的顶部定义函数。
在函数中添加警报，以便我们可以监听事件并在事件发生时生成警报。

例子：

App.js

import React from 'react';
  
function App() {
  function eventHandler(){
    alert('Geeksforgeeks is the best platform to learn coding!');
  }
  
  
  return (
    
      Welcome to Geeksforgeeks
      
    
  );
}
  
export default App;

运行应用程序的步骤：打开终端并在终端中编写以下命令。

npm start

输出：打开浏览器并输入 localhost:3000 以查看以下输出。