cleave react set raw value 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>
<div id="content"></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 MyComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
numericalCleave: null,
numericalRawValue: '',
renderClick: ''
};
this.onNumericalChange = this.onNumericalChange.bind(this);
this.onNumericalInit = this.onNumericalInit.bind(this);
this.renderClick = this.renderClick.bind(this);
}
onNumericalChange(event) {
this.setState({numericalRawValue: event.target.rawValue});
}
onNumericalInit(cleave) {
this.setState({numericalCleave: cleave});
}
renderClick(){
this.state.numericalCleave.setRawValue(10);
}
render() {
return (
<div>
<Cleave placeholder="Enter number"
options={{numeral: true, numeralThousandsGroupStyle: 'thousand'}}
onInit={this.onNumericalInit}
onChange={this.onNumericalChange}
/>
<div className="raw-values">
<p>Numerical: {this.state.numericalRawValue}</p>
</div>
<button onClick={this.renderClick}>Test provided method</button>
</div>
);
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('content'));