[Core] Overwrite onChange event?

[quangrau]

Hey man,
I really love this plugin, but when I try to overwrite onChange event, nothing happened.

[vijayrawatsan]

You can't. See below code for supported props for FormsyText

propTypes: {
    name: React.PropTypes.string.isRequired,
    value: React.PropTypes.string
  },

I tackled this problem by assigning a change handler to form like this:

<Formsy.Form
                ref="form"
                onValid={this.enableButton}
                onInvalid={this.disableButton}
                onValidSubmit={this.submitForm}
                onChange={this.formChange}>

And get the value of changed field like this

/* In this particular case I am checking the value of field name */
formChange: function (event) {
        if (typeof event.target !== 'undefined' && event.target.name === 'mobile') {
            this.setState({
                isMobileValid: /^[789]\d{9}$/.test(event.target.value)
            });
        }
    },

[mbrookes]

@lethanhquang - what Vijay said. :)

I guess we could rearrange the order to allow you to reassign onChange, but to be honest, at that point it pretty much defeats the purpose of using formsy-material-ui, and you might was well wrote your own wrapper.

Thinking about it we could add an onChange callback to each FMUI component itself to bubble that up from the underlying MUI component if there was enough demand for that feature. What is your use case?

[quangrau]

@vijayrawatsan: Thank you so much.
@mbrookes: In my case, I would like to reformat the currency number after the FormsyTextComponent has changed. But I think vijayrawatsan's solution is worked for me.

Than you guys!

[mbrookes]

Thanks for letting us know. I'll keep this open for now in case others need this - both to expose Vijay's solution, and in consideration of adding this at a component level in the future.

[konoufo]

I think it doesn't cost much to add an onChange prop in each FMUI component (and similar thing for all the other events callback) and expose it thru the handleChange method of each FMUI component. It'd be a good idea to add these. Make the wrapper flexible and complete.

[mbrookes]

I'd be cool with onChange, but so much of the rest of the material-ui API is in flux, I'd be reluctant to introduce much else, lest it all gets deprecated.

Feel free to post a PR for that much at least. 👍