JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://npmcdn.com/classnames/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="js-app"></div>

CSS

* {
    -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

Babel + JSX

console.clear();

const Input = React.createClass({
  getInitialState() {
  	this.regex = /(^\d+([0-9])*$)|(^\d+([0-9])+([\\.'])([0-9]*)?$)/;
  
    return {
      quantity: 12.99
    }
  },

  updateQuantity() {
    this.setState({
      quantity: this.state.quantity + 1
    });
  },

  handleChange(e) {
  	var quantity = e.target.value;
        
    if(this.regex.test(quantity) || quantity === '') {		
		this.setState({ 
            quantity
        });
    }
  },

  render() {
    return <div>
      <input 
        type="text" 
        value={this.state.quantity} 
        onChange={this.handleChange}
      />
    </div>
  }
});

ReactDOM.render(<Input />, document.body.querySelector('.js-app'));