如何在React中添加被动事件监听器？

Question

要在某个React输入元素上设置事件监听器，例如onKeyPress监听器，我们可以像这样操作：

<SomeInputElement onKeyPress={this.someListener.bind(this)}>

现在，我应该怎样做才能使我的someListener处于被动状态呢？

- UtkarshPramodGupta

---

根据这个问题，我不确定React是否支持。https://github.com/facebook/react/issues/6436 - galvan

Answer 1

您可以使用对元素的引用，在componentDidMount中手动添加事件监听器，并在componentWillUnmount中移除它们。

class Example extends Component {
  componentDidMount() {
    this.input.addEventListener('keypress', this.onKeyPress, { passive: false });
  }

  componentWillUnmount() {
    this.input.removeEventListener('keypress', this.onKeyPress);
  }

  onKeyPress(e) {
    console.log('key pressed');
  }

  render() {
    return (
     <SomeInputElement ref={ref => this.input = ref} />
    );
  }
}

- albert200000

Answer 2

只需将您的输入包裹在被动监听器中即可。

    import {PassiveListener} from 'react-event-injector';
    <PassiveListener onKeyPress={this.someListener.bind(this)}>
        <SomeInputElement/>
    </PassiveListener>

- Anton Korzunov

---

我真的找不到一个名为react-event-injector的模块。 :/ - UtkarshPramodGupta

谷歌很快，但不是那么快 - https://github.com/theKashey/react-event-injector - Anton Korzunov

某些奇怪的错误出现了，当 <canvas> 元素作为子元素时，它根本没有被渲染。 - Mikhail

Answer 3

手动完成此操作的另一种方法是使用 refs 和 useEffect。在某些情况下，useSyncExternalStore 也是一个选项。

const Foo = (props) => {
  const ref = useRef();
  useEffect(() => {
     const { current } = ref;
     if (!current) {
        return;
     }
     const abort = new AbortController();
     const { signal } = abort;
     current.addEventListener('keypress', onKeyPress, { passive: true, signal });
     return () => abort.abort();
  }, []);
  return <input {...props} ref={ref} />;
};

- Molly Stewart-Gallus