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