JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<body>
<div id="container"></div>
<div id="logdiv"></div>
</body>
Babel + JSX
function log(txt) {
const logdiv = document.getElementById('logdiv');
if (txt) {
logdiv.innerHTML += txt + '<br/>';
} else {
logdiv.innerHTML = '';
}
}
function logMouseEnter() { log("enter") }
function logMouseLeave() { log(" leave") }
function clearLog() { log() }
var ToolTipOverDisabledButton = React.createClass({
getInitialState() {
return { disabled: false };
},
toggleDisabled() {
clearLog();
this.setState({
disabled: !this.state.disabled
});
},
render() {
return (
<div onMouseEnter={logMouseEnter} onMouseLeave={logMouseLeave}>
<button disabled={this.state.disabled} onClick={this.toggleDisabled}>{this.state.disabled ? 'mouse leave is broken' : 'hover over me, then click to reproduce mouse leave bug'}</button>
</div>
);
}
});
ReactDOM.render(
<ToolTipOverDisabledButton />,
document.getElementById('container')
);