<!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>
    );
  }
}