React. Как динамически вешать обработчики?
import React, { Component } from 'react';

class MyComponent extends Component {
    // standard function bind
    constructor(props) {
        super(props);
        
        this.onClickBar = this.onClickBar.bind(this);
    }
    
    onClickBar(event) {
        // valid "this" only if bound in constructor
    }

    // babel-plugin-transform-class-properties is required for this syntax
    onClickFoo = (event) => {
        // "this" is always valid
    };
    
    render() {
        return (
            <div>
                <button onClick={this.onClickFoo}>foo</button>
                <button onClick={this.onClickBar}>bar</button>
            </div>
        );
    }
}
// EDIT
Храните в state компонента некий флаг, по которому будете делать return в начале обработчика.
Проще делать setState + холостой render, чем писать костыли, снимая/добавляя event listeners.
Добавлю, что если есть необходимость навешивать обработчики на события, которых нет "из коробки" (react events), например на resize окна,, можно использовать:
1) addEventListener (+ создание событий)
2) привычное вам jquery (многие против этого, лично мое мнение: иногда необходимость есть, ничего плохого здесь не вижу)
p.s. для доступа к DOM элементу, можете использовать ref.