面试题：React中常用阻止事件默认行为的方式有哪些

Question

在React开发中，描述至少两种阻止事件默认行为的方法，并举例说明如何在一个简单的点击事件中应用这些方法。

Answer 1

1. 使用event.preventDefault()方法：

   • 这是JavaScript原生用于阻止事件默认行为的方法。在React中，事件对象作为事件处理函数的参数传递，我们可以直接调用该方法。
   • 示例：

   import React from 'react';
   
   const App = () => {
     const handleClick = (event) => {
       event.preventDefault();
       console.log('阻止了默认行为');
     };
   
     return (
       <a href="https://example.com" onClick={handleClick}>
         点击我
       </a>
     );
   };
   
   export default App;
   

   在这个例子中，<a>标签默认会在点击时导航到https://example.com，但是通过event.preventDefault()方法，阻止了这种默认的导航行为。

2. 使用return false：

   • 在React中，某些情况下，在事件处理函数中return false也能阻止事件默认行为。这种方式在处理HTML原生元素的事件时较为常用。
   • 示例：

   import React from 'react';
   
   const App = () => {
     const handleClick = () => {
       console.log('阻止了默认行为');
       return false;
     };
   
     return (
       <form onSubmit={handleClick}>
         <input type="submit" value="提交" />
       </form>
     );
   };
   
   export default App;
   

   这里，<form>标签默认在点击提交按钮时会提交表单数据到服务器，但是通过在onSubmit事件处理函数中return false，阻止了表单的提交行为。