JSFiddle - React, Tailwind, and code Playground

by zpao

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

CSS

input:focus {
    outline: none;
}

JavaScript 1.7

/** @jsx React.DOM */

STATE_NORMAL = 0;
STATE_ERROR = 1;
STATE_SUCCESS = 2;

var ContactForm = React.createClass({
  getInitialState: function() {
    return {
      state: STATE_NORMAL
    };
  },

  validate: function() {

  },

  onSubmit: function() {
    if (this.validate()) {
      this.setState({
        state: STATE_SUCCESS
      })
      // submit
    } else {
      this.setState({
        state: STATE_ERROR
      });
    }
  },

  render: function() {
    var form, errorMsg, successMsg;

    if (this.state.state !== STATE_SUCCESS) {
      form =
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref="name" placeholder="name" />
        </form>;
    }

    if (this.state.state === STATE_SUCCESS) {
      successMsg = <div className="success">Thanks</div>;
    }

    if (this.state.state === STATE_ERROR) {
      errorMsg = <div className="error">You fucked up</div>;
    }

    return (
      <div>
        {errorMsg}
        {form}
        {successMsg}
      </div>
    );
  }
});

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