JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="content">
<!-- This element's contents will be replaced with your component. -->
</div>
JavaScript 1.7
var Photo2 = React.createClass({
getInitialState: function() {
return {title: 'http://adtmag.com/blogs/dev-watch/2015/02/~/media/ECG/adtmag/Images/2015/01/react_s.png', size: 'BIGGER', wd:300};
},
handleClick: function(event) {
(this.state.size == 'BIGGER') ? this.setState({title:'http://adtmag.com/blogs/dev-watch/2015/02/~/media/ECG/adtmag/Images/2015/01/react.png',wd: 600,size: 'smaller'}) : this.setState({title:'http://adtmag.com/blogs/dev-watch/2015/02/~/media/ECG/adtmag/Images/2015/01/react.png',wd: 300,size: 'BIGGER'});
},
handleSlide: function(event) {
this.setState({wd: event.target.value});
},
handleLeave: function (event) {
this.setState({title:'http://adtmag.com/blogs/dev-watch/2015/02/~/media/ECG/adtmag/Images/2015/01/react_s.png',wd: 300,size: 'BIGGER'});
},
render: function() {
var divStyle = {width: this.state.wd, border: '1px solid red', color: 'red'};
return (
<div>
<div>Slide to Adjust Image Size</div>
<div>
<input ref="range"
type="range"
defaultValue="300"
min="300"
max="600"
onChange={this.handleSlide} />
</div>
<div>
<button onClick={this.handleClick}>Click Here or Hover Over Photo to Make It: {this.state.size} </button>
<div className='photo' style={divStyle}>
<img onClick={this.handleClick} onMouseEnter={this.handleClick} onMouseOut={this.handleLeave} src={this.state.title} width={this.state.wd} />
</div>
</div>
</div>
);
}
});
React.render(
<Photo2 />,
document.getElementById('content')
);