React createClass Component
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<div id="container"></div>
CSS
.uk-container {
background: #333
}
Babel + JSX
var ReactNumericInput = React.createClass({
onChange: function(event) {
this.setState({typed: event.target.value});
console.log('change');
value = new String(input);
// remove all characters that aren't digit or dot
value = value.replace(/[^0-9.]/g,'');
// replace multiple dots with a single dot
value = value.replace(/\.+/g,'.');
// only allow 2 digits after a dot
value = value.replace(/(.*\.[0-9][0-9]?).*/g,'$1');
// replace multiple zeros with a single one
value = value.replace(/^0+(.*)$/,'0$1');
// remove leading zero
value = value.replace(/^0([^.].*)$/,'$1');
return value;
},
render: function() {
return <div>
<input type="text" onChange={this.onChange}/>
</div>
}
});
ReactDOM.render(
<ReactNumericInput name="World" />,
document.getElementById('container')
);