Skip to content

Instantly share code, notes, and snippets.

@brandonbloom
Last active August 29, 2015 14:04
Show Gist options
  • Save brandonbloom/56be8fcd4989f7396a1a to your computer and use it in GitHub Desktop.
Save brandonbloom/56be8fcd4989f7396a1a to your computer and use it in GitHub Desktop.
/** @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);
/** @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);
/** @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);
@DavidBruant
Copy link

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.

@n1k0
Copy link

n1k0 commented Jul 20, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment