Skip to content

Instantly share code, notes, and snippets.

@vicapow

vicapow/index.html

Created June 3, 2014 06:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vicapow/169dceaaafa5c60dcf14 to your computer and use it in GitHub Desktop.
Save vicapow/169dceaaafa5c60dcf14 to your computer and use it in GitHub Desktop.
Download ZIP
two way data binding in reactjs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */
var Slider = React.createClass({
getDefaultProps: function() {
return {
handleChange: function(){ }
}
},
render: function() {
return this.transferPropsTo(
<input type="range" />
)
}
})
var HelloMessage = React.createClass({
getInitialState: function() {
return { value: 10 };
},
handleChange: function(e) {
var el = e.currentTarget
// console.log(el.value)
this.setState({value: e.currentTarget.value})
},
render: function() {
var sliders = [];
for(var i = 0; i < 100; i++) {
sliders.push(<Slider value={this.state.value} onChange={this.handleChange} />);
}
return <div>
{sliders}
</div>
}
})
var body = document.getElementsByTagName('body')[0]
React.renderComponent(<HelloMessage name="John" />, body)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment