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

Question

要设置事件侦听器，例如在某些反应输入元素上的 onKeyPress 侦听器，我们执行以下操作：

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

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

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} />
    );
  }
}

Answer 2

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

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