JSFiddle - React, Tailwind, and code Playground
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();
var StopPrice = React.createClass({
getInitialState() {
return {
stopPrice: 92.99
}
},
updateStopPrice(stopPrice) {
this.setState({
stopPrice
})
},
onChange(event) {
var stopPrice = event.target.value;
this.setState({
stopPrice
});
},
render() {
return <div>
<input type="number" value={this.state.stopPrice} onChange={this.onChange} pattern="\d+((\.|,)\d+)?"/>
</div>
}
})
ReactDOM.render(<StopPrice/>, document.querySelector('.js-app'))