如何防止 ReactJS 的事件回调中的默认行为？

Javascript 中的某些事件具有与之关联的默认操作。例如，单击锚标记会将用户带到 href 属性中指定的路径。表单元素可以具有通过“提交”类型的按钮调用的提交事件。这将导致浏览器在单击按钮时刷新。虽然在过去这对于允许后端处理数据是必要的，但大多数现代 Web 应用程序不需要浏览器在每次提交表单时重新加载。

通常，开发人员可能会选择运行他们自己定义的行为，即防止浏览器不必要地重新加载。让我们看看如何做到这一点。

创建 React 应用程序：在继续该方法之前，我们必须创建一个 React 应用程序。

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

npx create-react-app myapp

第 2 步：创建项目文件夹后，即myapp ，使用以下命令移动到该文件夹：

cd myapp

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

初始文件夹结构

第 3 步：现在我们已经建立了项目，让我们将位于src文件夹内的App.js的内容替换为以下代码：

Javascript

import React, { useState } from "react";
  
function App() {
  const [name, setName] = useState("");
  
  const handleSubmit = () => {
    alert("There will be a browser reload once the alert box is closed.");
  };
  
  return (
    
       setName(e.target.value)}
      />
      
    
  );
}
  
export default App;

Javascript

import React, { useState } from "react";
  
function App() {
  const [name, setName] = useState("");
  
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("The browser will not reload when the alert box is closed.");
  };
  
  return (
    
       setName(e.target.value)}
      />
      
    
  );
}
  
export default App;

我们有一个带有提交事件的表单元素，包装了一个按钮。当按钮被点击时， handleSubmit函数被触发。

第四步：使用以下命令在开发模式下运行应用程序，并在浏览器中打开http://localhost:3000查看：

npm start

我们可以清楚地看到，每次点击按钮，都会出现一个alert，当我们关闭alert时，浏览器会自行刷新。

浏览器自行刷新

我们可以通过对handleSubmit函数的定义进行小的修改来防止这种默认行为。我们在提交表单时调用事件的preventDefault ，这将取消默认事件行为（浏览器刷新），同时允许我们执行我们在 handleSubmit 中编写的任何代码。

因此， App.js的代码现在变为：

Javascript

import React, { useState } from "react";
  
function App() {
  const [name, setName] = useState("");
  
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("The browser will not reload when the alert box is closed.");
  };
  
  return (
    
       setName(e.target.value)}
      />
      
    
  );
}
  
export default App;

这是新的行为：

没有自动刷新！