cleave react demo

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-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-react.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<div id="root"></div>

CSS

* {
    font-family: sans-serif;
}

.raw-values {
    margin-top: 20px;
    border-top: 1px dotted #AAA;
}

input {
    display: block;
    outline: none;
    -webkit-appearance: none;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #fff;
    line-height: 30px;
    vertical-align: middle;
    height: 33px;
    width: 170px;
    font-size: 14px;
    padding: 0 8px;
    margin-bottom: 10px;
}

.input-numeral {
    text-align: right;
}

Babel + JSX

class Input extends React.Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    this.props.onChange(e.target.rawValue)
    
  }

  render () {
    return (
      <Cleave
        {...this.props}
        onChange={this.handleChange} />
    )
  }
}

class Field1 extends React.Component {
  constructor (props) {
    super(props)
    this.state = {value: ''}
    this.immutableDefaultValue = this.state.value;
    
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (value) {
    this.setState({value})
  }

  render () {
    const options = {
      numeral: true,
      numeralThousandsGroupStyle: 'thousand',
      numeralDecimalMark: ',',
      delimiter: ','
    }
    
    return (
    	<div>
        <Input
          value={this.immutableDefaultValue}
          options={options}
          onChange={this.handleChange} />
      </div>
    )
  }
}

ReactDOM.render(<div><Field1 /></div>, document.getElementById('root'))