gistfile1.js

/** @jsx React.DOM */

var Bubbler = React.createClass({
  render: function() {
    return <input type="button" onClick={this.props.onFoo} value="Click me"/>;
  }
});

var Handler = React.createClass({
    onFoo: function() {
      alert("handled!");
    },
    render: function() {
        return <Bubbler onFoo={this.onFoo}/>;
    }
});
 
React.renderComponent(<Handler/>, document.body);

gistfile2.js

/** @jsx React.DOM */

var Bubbler = React.createClass({
  render: function() {
    return <input type="button" onClick={this.props.onFoo} value="Click me"/>;
  }
});

var Handler = React.createClass({
    effects: {
        foo: function() {
            alert("handled!");
        }
    },
    render: function() {
        return <Bubbler onFoo={this.effects.foo}/>;
    }
});
 
React.renderComponent(<Handler/>, document.body);

gistfile3.js

/** @jsx React.DOM */

var Bubbler = React.createClass({
  render: function() {
    return <input type="button" onClick={this.props.onFoo} value="Click me"/>;
  }
});

var Handler = React.createClass({
    handlers: function() {
        return [
            [this.props.eff, function() {
                alert("handled!");
            }]
        ];
    },
    render: function() {
        return this.props.children;
    }
});

var Wrapper = React.createClass({
  effects: {
    foo: newEffect()
  },
  render: function() {
    return <Handler eff={this.effects.foo}><Bubbler onFoo={this.effects.foo}/></Handler>
  }
});
 
React.renderComponent(<Wrapper/>, document.body);

I would add an event listener to mousemove only after a mousedown on the element and remove the listener on mouseup

Sounds complicated… Is this for performance reason? Anyway you're right, there's no obvious way to achieve this using event listeners passed as attributes in React. I'm just challenging the idea of this need being mainstream enough for the team to work on this… Honestly, I don't have a clue.

I ended up implementing the range thing I was talking about https://davidbruant.github.io/inline-range-demo/ Click on the number and drag left and right to increase/decrease the value.
It can be implemented in React, but in a way that is more elegant in my opinion, because of the lack of a proper event system.

http://jsbin.com/vapay/4/edit

It's really matter of calling the handleMouseMove method and testing for this.state.dragging; it's probably less performent, but not that much I think (though I'm not sure). This could probably be microbenchmarked, oh well.