React. How to dynamically hang handlers?

Question

React

How to dynamically hang handlers?
In jQuery, you can write anywhere on an element:

element.on("click",function(){});
element.off("click");

How to do something like this in React?

Answer 1

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
Store a flag in the state of the component, according to which you will return at the beginning of the handler.
It's easier to do setState + idle render than to write crutches by removing/adding event listeners.