React. Как динамически вешать обработчики?

Question

[KnightForce]

Как динамически вешать обработчики?
В jQuery можно на элемент в любом месте написать:

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

Как что-то такое делать в React?

Answer 1

[Mikhail Osher]

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.

Comments

[KnightForce]

Я думал о флагах, но интересовало именно динамически, для общего развития.)

Answer 2

[Максим]

Добавлю, что если есть необходимость навешивать обработчики на события, которых нет "из коробки" (react events), например на resize окна,, можно использовать:
1) addEventListener (+ создание событий)
2) привычное вам jquery (многие против этого, лично мое мнение: иногда необходимость есть, ничего плохого здесь не вижу)

p.s. для доступа к DOM элементу, можете использовать ref.