reactjs - 事件侦听器回调函数的事件类型 - React & Typescript

Question

我正在尝试处理滚动事件，以便可以在滚动时将新的类名添加到元素中。

我做了什么：

• 为事件监听器创建回调函数
• 使用 useEffect 和 addEventListener

这是代码：

  const onScrollHandler = (e: React.ChangeEvent):void => {
    if (!e.target.classList.contains('onScrollBar')) {
      e.target.classList.add('onScrollBar');
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', onScrollHandler, true);

    return () => {
      window.removeEventListener('scroll', onScrollHandler, true);
    };
  }, []);

我得到的问题：

• 从 addEventListener 中，onScrollHandler显示此错误

No overload matches this call.
  Overload 1 of 2, '(type: "scroll", listener: (this: Window, ev: Event) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(e: React.ChangeEvent) => void' is not assignable to parameter of type '(this: Window, ev: Event) => any'.
      Types of parameters 'e' and 'ev' are incompatible.
        Type 'Event' is missing the following properties from type 'ChangeEvent<Element>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(e: React.ChangeEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
      Type '(e: React.ChangeEvent) => void' is not assignable to type 'EventListener'.
        Types of parameters 'e' and 'evt' are incompatible.
          Type 'Event' is not assignable to type 'ChangeEvent<Element>'.ts(2769)

我认为这与e: React.ChangeEvent. 那么在这种情况下，正确的事件类型应该是什么？

非常感谢！

标签： reactjstypescriptaddeventlistener

Answer 1

我的同事帮助我解决了这个问题，这对我来说很神奇：D

所以基本上，事件类型应该Event在调用时更改e.target，我们需要将其指定为Element

这是修复：

  const onScrollHandler = (e: Event):void => {
    if((e.target as Element).classList.contains('onScrollBar')) {
      ((e.target as Element).classList.add('onScrollBar'))
    }
  };

  useEffect(() => {
    document.addEventListener('scroll', onScrollHandler, true);

    return () => {
      document.removeEventListener('scroll', onScrollHandler, true);
    };
  }, []);