Question

要设置事件侦听器，例如在某些react输入元素上设置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>

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

2 个答案: