How to add passive event listeners in React?
Just wrap your input with passive listener
import {PassiveListener} from 'react-event-injector';
<PassiveListener onKeyPress={this.someListener.bind(this)}>
<SomeInputElement/>
</PassiveListener>
You can always add event listeners manually in componentDidMount
using a reference to your element. And remove them in 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} />
);
}
}