JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
<div id="here"></div>
JavaScript
var Comp = React.createClass({
getInitialState: function() {
return { text: 'Start' }
},
render: function() {
return React.DOM.div({
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
onClick: this.handleClick
},
"Some content: " + this.state.text);
},
handleMouseEnter: function() {
this.setState({ text: 'I am entering!' })
},
handleMouseLeave: function() {
this.setState({ text: 'I am leaving!' })
},
handleClick: function() {
this.setState({ text: 'I was clicked!' })
}
});
var comp = Comp();
React.renderComponent(comp, document.getElementById('here'));
var Utils = React.addons.TestUtils;
var Simulate = Utils.Simulate;
var events = ['mouseEnter', 'mouseLeave', 'click'];
var i = 0;
var div = Utils.findRenderedDOMComponentWithTag(comp, 'div');
setInterval(function() {
var event = events[i % events.length];
i++;
console.log('simulating ' + event);
Simulate[event](div);
console.log('The text is: ' + comp.state.text);
}, 1000)