React onWheel 处理程序无法阻止Default，因为它是被动事件监听器

使用React开发Web应用程序时，我们经常需要处理用户的滚轮事件。React提供了一个onWheel处理程序，可以用于监听滚轮事件并执行相应的操作。然而，我们发现使用onWheel处理程序无法阻止默认的滚轮行为，因为它是被动事件监听器。在本文中，我们将讨论这个问题，并提供一些解决方案。

jsx
import React, { useState } from 'react';
const ImageComponent = () => {
  const [scale, setScale] = useState(1);
  const handleWheel = (event) => {
    event.preventDefault(); // 无效
    const delta = event.deltaY;
    if (delta > 0) {
      setScale(scale - 0.1);
    } else if (delta < 0) {
      setScale(scale + 0.1);
    }
  }
  return (
    
      
    
  );
}
export default ImageComponent;

jsx
import React, { useState, useEffect } from 'react';
const ImageComponent = () => {
  const [scale, setScale] = useState(1);
  const handleWheel = (event) => {
    const delta = event.deltaY;
    if (delta > 0) {
      setScale(scale - 0.1);
    } else if (delta < 0) {
      setScale(scale + 0.1);
    }
  }
  useEffect(() => {
    const wheelHandler = (event) => event.preventDefault();
    document.addEventListener('wheel', wheelHandler, { passive: false });
    return () => {
      document.removeEventListener('wheel', wheelHandler);
    }
  }, []);
  return (
    
      
    
  );
}
export default ImageComponent;