JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var TextListEditor = React.createClass({
    getInitialState: function() {
        return {
            options: [{
                content: "$x$"
            }]
        };
    },

    render: function() {
        var inputs = this.state.options.map(function(option, i) {
            return <li key={i}>
                <input type="text"
                       ref={"editor" + i}
                       onInput={this.onContentChange.bind(this, i)}
                       value={option.content} />
            </li>;
        }, this);

        inputs.push(
            <li key={inputs.length}>
                <input type="text"
                       ref={"editorExtra"}
                       onInput={this.addOption}
                       value="" />
            </li>
        );

        return <ul className="ui-helper-clearfix">{inputs}</ul>;
    },

    addOption: function(e) {
        // If we type into the empty input box at the end, we add a new input
        // box in its place, copy over the contents, focus it at the correct
        // place, and re-empty the last input box
        e.preventDefault();

        var options = this.state.options;
        var blankOption = {content: e.target.value};

        this.setState({options: options.concat([blankOption])});
    },

    onContentChange: function(optionIndex, e) {
        var options = this.state.options.slice();
        var option = _.clone(options[optionIndex]);

        option.content = e.target.value;
        options[optionIndex] = option;

        // Delete empty inputs at the end
        var didDelete = false;
        for (var i = options.length - 1;
             i >= 0 && options[i].content === "";
             i--) {
            options.splice(i, 1);
            didDelete = true;
        }

        this.setState({options: options});
    }
});
 
React.renderComponent(<TextListEditor />, document.body);