如何将参数传递给事件处理程序或回调？

React js 是当今最流行的 JavaScript 框架之一。由于框架的独特功能，有很多公司的网站都是基于 React 构建的。 React UI 包含几个组件。用户可以在 React 用户界面上执行许多任务。每个组件都有不同的 HTML 元素，用户可以在其中单击、悬停或触发任何形式的事件。

事件处理程序：事件是 UI 发生变化时发送的信号。用户可以单击鼠标悬停拖动鼠标或按任意键来执行这些事件。为了响应这些变化，用户可以编写事件处理程序代码。在使用 React 事件时，您需要牢记这两点。

React 事件以 camelCase 的格式命名（onChange 而不是 onchange）。
React 事件处理程序放置在大括号内（onChange={handleSubmit} 而不是 onChange=”handleSubmit”）。

方法：让我们创建一个 React 项目，然后我们将创建一个事件处理程序。用户可以通过它进行交互和触发事件。在 UI 中看到响应后，我们将创建自己的参数。这将帮助您了解事件处理程序的底层逻辑并通过它传递参数。

创建反应项目：

第 1 步：要创建一个反应应用程序，您需要通过 npx 命令安装反应模块。使用“ Npx”而不是“npm”，因为您在应用程序的生命周期中只需要一次此命令。
```
npx create-react-app project_name
```
第 2 步：创建您的 react 项目后，移动到该文件夹以执行不同的操作。
```
cd project_name
```

项目结构：运行上述步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到类似的项目结构，如下所示。用户制作的新组件或我们将执行的代码更改将在源文件夹中完成。

示例 1：在此示例中，我们将创建一个事件处理程序，该处理程序在您单击按钮时发送欢迎消息，即警报。

App.js

import React from "react";
class App extends React.Component {
  call() {
    alert("Welcome to Geeks for Geeeks!");
  }
  render() {
    return (
      
    );
  }
}
  
export default App;

App.js

import React from "react";
class App extends React.Component {
  call(message,event) {
    alert(message);
  }
  render() {
    return (
       //Creating a arrow function 
      
    );
  }
}
export default App;

App.js

import React from "react";
class App extends React.Component {
  call(message) {
    alert(message);
  }
  render() {
    return (
      
    );
  }
}
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器。默认情况下，它将打开一个运行 localhost (http://localhost:3000/) 的选项卡，您可以看到图像中显示的输出。点击按钮查看欢迎信息。

示例 2：在此示例中，我们将使用箭头函数创建一个新函数，该函数调用具有正确参数的函数调用。将 react 的事件对象作为第二个参数传递。如果要将参数传递给单击事件处理程序，则需要使用箭头函数或绑定函数。如果您直接传递参数，即使在按下按钮之前，也会自动调用 onClick函数。

应用程序.js

import React from "react";
class App extends React.Component {
  call(message,event) {
    alert(message);
  }
  render() {
    return (
       //Creating a arrow function 
      
    );
  }
}
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器。默认情况下，它将打开一个运行 localhost (http://localhost:3000/) 的选项卡，您可以看到图像中显示的输出。点击按钮查看欢迎信息。

示例 3：在本示例中，我们将使用 Bind 方法，该方法也用于在基于类的组件的函数中传递参数。

应用程序.js

import React from "react";
class App extends React.Component {
  call(message) {
    alert(message);
  }
  render() {
    return (
      
    );
  }
}
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器。默认情况下，它将打开一个运行 localhost (http://localhost:3000/) 的选项卡，您可以看到图像中显示的输出。点击按钮查看欢迎信息。