JSFiddle - React, Tailwind, and code Playground

by Joshua Koudys

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="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var Hello = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function () {
        return {
            checkboxes: {
                available: false,
                forSale: false,
                bogo: false
            }
        };
    },
    saveStuff: function() {
        console.log(JSON.stringify(this.state));
    },
    render: function () {
        return <div> Hello <ManyCheckBoxes valueLink={this.linkState('checkboxes')} /><ManyCheckBoxes valueLink={this.linkState('checkboxes')} /><p><a onClick={this.saveStuff}>Save</a></p></div>;
    }
});

var ManyCheckBoxes = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    handleCheck: function(propname) {
        var checkboxes = this.props.valueLink.value;
        var valueLink = this.props.valueLink;

        return {
            value: checkboxes[propname],
            requestChange: function (value) {
                checkboxes[propname] = value;
                valueLink.requestChange(checkboxes);
            }
         };
    },
        
    render: function() {
        var valueLink = this.props.valueLink;
        return (
            <fieldset>
                <ul>
                    <li>
                        <label><input type="checkbox" checkedLink={this.handleCheck('available')} /> Available</label>
                    </li>
                    <li>
                        <label><input type="checkbox" checkedLink={this.handleCheck('forSale')} /> For Sale</label>
                    </li>
                    <li>
                        <label><input type="checkbox" checkedLink={this.handleCheck('bogo')} /> Buy one, get one free</label>
                    </li>
                </ul>
            </fieldset>
        );
    }
});    
 
React.render(<Hello /> , document.body);