如何在 ReactJS 中使用事件？

我们今天创建的每个现代网页都倾向于进行用户交互。当用户与 Web 应用程序交互时，会触发事件。该事件可以是鼠标单击、按键或一些罕见的事情，例如将电池与充电器连接。从开发人员的角度来看，我们需要“监听”这些事件，然后让我们的应用程序做出相应的响应。这称为事件处理，它为网页提供动态界面。与 JavaScript DOM 一样，React 也为我们提供了一些内置方法来创建相应地响应特定事件的侦听器。 Javascript 有事件来为网页提供动态界面。这些事件与文档对象模型 (DOM) 中的元素挂钩。这些事件默认使用冒泡传播，即在 DOM 中从子级向上传播到父级。我们可以将事件绑定为内联或外部脚本。

创建反应应用程序：

第 1 步：使用以下命令创建一个反应应用程序

npx create-react-app app-name

第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序

cd foldername

项目结构：它将如下所示。

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

• React 事件使用 camelCase 命名，而不是小写。
• 使用 JSX，您可以传递一个函数作为事件处理程序，而不是一个字符串。

在 DOM 中：

  Print

在反应：

  Print

在提交表单时，您可以返回 false，就像我们在 HTML 中所做的那样。在 Reactjs 中你必须显式调用 preventDefault() 。

方法：在 Created React web 应用程序中转到 App.js。

• 在您的 Default App.js 中进行以下代码更改。
• 这里我们创建了一个箭头函数名称为handleOnSubmit
• 在函数中我们执行 console.warn(“You clicked on submit 函数”)
• 制作一个按钮并添加事件 onclick={handleOnSubmit}

App.js

import "./App.css";
function App() {
  const handleOnSubmit = (e) => {
    e.preventDefault();
    console.warn("You clicked on submit function")
  };
  return (
    <>
      
This is React WebApp 
      

        
          submit
        
      
       
    
  );
}
  
export default App;

运行应用程序的步骤：输入以下命令运行应用程序。

npm start

输出：