Cleave.js: [react] value doesn't update on the component

[periabyte]

component value doesn't update after setting the state (which is passed to props as value)
here's a jsfiddle( https://jsfiddle.net/w6w30Lv7/) to show the bug.

[nosir]

Thanks, let me have a look at this.

[cht8687]

@periabyte The fiddle link mark down seems not working properly. should be jsfiddle

[nosir]

@cht8687 cheers, I edited it, fine now

[nosir]

Fix applied, some explanation for the fix:

Inside the cleave component, no doubt input.value is bound to the value state, however, this only happens internally, the state can't be shared with parent components.

In the fix, I added a setRawValue method, which works same as the plain JS one.

Check this: https://jsfiddle.net/nosir/wqm8pm6c/

If you need to update/reset the cleave field value from model, this is the way:

1. Pass onInit to component, the callback returns the cleave instance, store it as a variable or in state.
2. Whenever you want to update value, call cleave.setRawValue('...') to trigger the change.
3. onChange event will be automatically triggered, from here you can grab the returned raw/formatted value and update your state.

[cht8687]

If you put a $ sign on onInit, this really likes Angular component lifecycle now....lol

[nosir]

Will close this, please reopen if there is any issue.

[nosir]

Doc update: https://github.com/nosir/cleave.js/blob/master/doc/reactjs-component-usage.md#how-to-update-raw-value