JSFiddle - React, Tailwind, and code Playground

by NV

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

[contentEditable] {
    border: 1px solid #999;
    display: inline-block;
    padding: 3px;
}

JavaScript 1.7

/** @jsx React.DOM */

var Number = React.createClass({
    render: function() {
        return <div>
            <span contentEditable={true} onChange={this.onChange} onInput={this.onInput}>
                {this.state.value}
            </span>
            =
            {this.state.value}
        </div>;
    },
    onInput: function(e) {
        this.setState({value: e.target.textContent});
    },
    onChange: function(v) {
        // Doesn't fire :(
        console.log('changed', v);
        this.setState({value: v}); 
    },
    getInitialState: function() {
        return {value: '123'}
    }
});

React.renderComponent(<Number />, document.body);