面试题：React事件代理机制下阻止默认行为的注意事项

Question

由于React使用事件代理机制，当你在子组件中阻止事件默认行为时，可能会遇到哪些特殊情况？如何解决这些情况以确保阻止默认行为生效且不影响其他功能？请结合具体代码示例说明。

Answer 1

特殊情况

1. 父组件事件干扰：虽然在子组件中阻止了默认行为，但父组件可能也绑定了相同类型事件，且没有正确处理，导致默认行为似乎没有被完全阻止。
2. 合成事件兼容性：React 的合成事件与原生事件存在差异，在处理一些复杂交互或特定浏览器行为时，可能出现阻止默认行为不生效的情况。

解决方法及代码示例

1. 确保父组件正确处理
   • 代码示例：

   import React, { useState } from'react';
   
   const ParentComponent = () => {
     const [message, setMessage] = useState('');
     const handleClick = (e) => {
       // 这里避免在父组件做可能触发默认行为的操作
       setMessage('父组件被点击');
     };
   
     return (
       <div onClick={handleClick}>
         <ChildComponent />
         <p>{message}</p>
       </div>
     );
   };
   
   const ChildComponent = () => {
     const handleClick = (e) => {
       e.preventDefault();
       alert('子组件阻止了默认行为');
     };
   
     return (
       <a href="#" onClick={handleClick}>
         点击我
       </a>
     );
   };
   
   export default ParentComponent;
   

   • 解释：在这个例子中，父组件 ParentComponent 只是更新状态，没有触发默认行为的操作。子组件 ChildComponent 中对 <a> 标签的点击事件调用 e.preventDefault() 来阻止链接跳转的默认行为。
2. 处理合成事件兼容性
   • 代码示例：

   import React, { useState } from'react';
   
   const SpecialComponent = () => {
     const [message, setMessage] = useState('');
     const handleKeyDown = (e) => {
       if (e.key === 'Enter') {
         e.preventDefault();
         setMessage('阻止了Enter键的默认行为');
       }
     };
   
     return (
       <input
         type="text"
         onKeyDown={handleKeyDown}
         placeholder="按Enter键"
       />
       <p>{message}</p>
     );
   };
   
   export default SpecialComponent;
   

   • 解释：在这个例子中，SpecialComponent 监听输入框的 onKeyDown 事件，当按下 Enter 键时，调用 e.preventDefault() 阻止默认提交表单（如果是表单内的输入框）的行为。这种方式处理了合成事件在特定场景下阻止默认行为的需求。