<!DOCTYPE html>
<html>
<style>
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input::-ms-clear {
display: none;
}
</style>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js" data-semver="0.13.3" data-require="react@*"></script>
</head>
<body>
<div id="example"></div>
<script src="CurrencyField.js"></script>
<script src="script.js"></script>
</body>
</html>
var App = React.createClass({
getInitialState: function() {
return {money: '1000456456'};
},
handleChange: function(value) {
this.setState({money: value});
},
onSubmit: function(e){
console.log(e.target);
},
render: function() {
return (
<div>
<form onSubmit={this.onSubmit}>
<NumberField value={this.state.money} onChange={this.handleChange} />
<div>{this.state.money}</div>
<input type="submit"/>
</form>
</div>
);
}
});
React.render(
<App />,
document.getElementById('example')
);
class NumberField extends React.Component {
constructor(props) {
super(props);
this.state = { isEditing: false };
}
onChange(event) {
this.props.onChange(event.target.value);
}
toCurrency(number) {
const formatter = new Intl.NumberFormat("en-US");
return formatter.format(number);
}
toggleEditing() {
this.setState({ isEditing: !this.state.isEditing });
}
render() {
return (
<div>
<label > Amount </label>
{this.state.isEditing ? (
<input
type="number"
value={this.props.value}
onChange={this.onChange.bind(this)}
onBlur={this.toggleEditing.bind(this)}
/>
) : (
<input
type="text"
value={this.toCurrency(this.props.value)}
onFocus={this.toggleEditing.bind(this)}
readOnly
/>
)}
</div>
);
}
}