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

Question

要设置事件侦听器，例如某些反应输入元素上的 onKeyPress 侦听器，我们会这样做：

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

现在，我应该怎么做才能让我的 someListener 被动？

Answer 1

只需用被动侦听器包装您的输入

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

Answer 2

您始终可以使用对元素的引用在 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} />
    );
  }
}

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

How to add passive event listeners in React?

html

javascript

dom-events

reactjs

passive-event-listeners