JSFiddle - React, Tailwind, and code Playground

by Travis McWilliam

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var Form = React.createClass({
    getInitialState: function () {
        return {
            email: ""  
        };
    },
    
    render: function() {
        return (
            <form onSubmit={this.submit}>
                <input type="text" onChange={this.update} value={this.state.email} />
                <button onClick={this.dontExecuteOnEnter}>Not on Enter</button>
                <input type="submit"/>
            </form>
        );
    },
    
    update: function (ev) {
        ev && ev.preventDefault();
        
        this.setState({ email: ev.target.value });
    },
    
    dontExecuteOnEnter: function (ev) {
        console.log("this shouldn't print out if the Enter key was hit");
        ev && ev.preventDefault(); // stop future bubbling
    },
    
    submit: function (ev) {
        ev && ev.preventDefault();
        
        console.log("email: ", this.state.email);
    }
});
 
React.renderComponent(<Form />, document.body);