How to add multiple event handlers to same event in React.js

Question

All:

I wonder if it is possible that binding multiple event handlers to same event?

For example:

var LikeToggleButton = React.createClass({
    r         


        

Answer 1

To group multiple actions on an event

onMouseDown={(e) => { e.stopPropagation(); alert('hello'); }}

Answer 2

If you want to have multiple callbacks executed when onClick is triggered, you can have them passed from outside, so you'll have access to them in the props object. Then execute them all (note: code not tested):

var LikeToggleButton = React.createClass({

    toggle: function() {
        this.setState({liked:!like});
    },

    handleClick: function(e) {
        e.preventDefault();
        this.toggle();
        for (var i=0, l<this.props.callbacks.length; i<l; i++) {
           this.props.callbacks[i].call();
        }
    },

    render: function() {            
        return (
            <div onClick={this.handleClick}>TOGGLE LIKE</div>  
        );
    }
});

BUT, if you want to have components connected between them, you should not do that by calling methods inside handlers. Instead you should use an architectural pattern, where Flux is the obvious choice (but there are lots more).

Take a look to Flux, and here you have more choices.

Answer 3

Maybe you can set multiple click event handlers on the same one target as described here: https://gist.github.com/xgqfrms-GitHub/a36b56ac3c0b4a7fe948f2defccf95ea#gistcomment-2136607

Code (copied from linke above):

<div style={{ display: 'flex' }}>
    <div style={{
            width: '270px',
            background: '#f0f0f0',
            borderRight: "30px solid red",
            minHeight: ' 500px',
            maxHeight: '700px',
            overflowX: 'hidden',
            overflowY: 'scroll',
        }}
        onClick={this.state.ClickHandler}
        onClick={this.stateHandleClick}
        className="sidebar-btn"
        >
        <button onClick={this.props.ClickHandler}>props</button>
        <button onClick={(e) => this.props.ClickHandler}>props</button>
        <button onClick={this.props.ClickHandler}>props</button>
        <button onClick={this.state.ClickHandler}>state</button>
 //...
</div>

Answer 4

For an extensible way that does't require the component to know about components that use it - save the onClick event before changing it. This is highlights extracted from the actual working code:

button.jsx

class Button extends React.Component {

  constructor(props) {
    super(props);
    this.state= { callback: false};
  }

  click(){
    //do stuff here
    if(this.state.callback) { this.state.callback.call(); }
  }

  render () {
    this.state.callback = this.props.onClick; // save the onClick of previous handler

    return (
      <button { ...this.props } type={ this.props.type || "button" } onClick={ this.click.bind(this) } className = this.props.className } >
        { this.props.children }
      </button>
    );
  }
}
export default Button;

Then in another component you can use the button and it can have it's own onClick handler:

class ItemButtons extends React.Component {
  itemClick () {
    //do something here;
  }

render () {
    const buttons = [
      (
          <Button onClick={ this.itemClick.bind(this) } className="item-button">
            <span>Item-Button</span>
          </Button>
      )
    ];

    return (<section>{ buttons }</section>);
}

export default ItemButtons;