JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<body>
</body>
JavaScript 1.7
/** @jsx React.DOM */
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
console.log('handleChange', this.refs.complete.state.checked); // Never gets logged
this.setState({
complete: this.refs.complete.getDOMNode().checked
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete ? 'line-through' : ''
};
return (
<div>
<label style={labelStyle}>
<input
type="checkbox"
checked={this.state.complete}
ref="complete"
onChange={this.handleChange}
/>
{this.props.text}
</label>
</div>
);
}
});
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), document.body);