twisty / formsy-react-components

Bootstrap components for a formsy-react form.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Why swallow event?

tylercollier opened this issue · comments

I love this project. Thanks for doing a lot of work for me!

I'm confused by some things I see:

In input.js:

changeValue: function changeValue(event) {
    var value = event.currentTarget.value;
    this.setValue(value);
    this.props.onChange(this.props.name, value);
},

On the last line, why wouldn't you call this.props.onChange(event)?

My motivation here is that I'm using redux-form, and trying to use this library alongside it, as formsy-react's validation is much better. redux-form's onChange expects an event OR a value, and you are passing the input name and then the value, which seems odd.

I thought about modifying changeValue myself, by creating my own React component. My idea was to use input.js's Input class as a mixin for my component (with a slightly modified changeValue), but you can't use a react class as a mixin, you can only use a plain javascript object. input.js does not expose a plain object. Would you consider exposing the plain javascript object?

Hi @tylercollier,

Thanks for this observation and sorry for not responding to this for a while.

Most of the form components we provide are wrappers for a single element (like a text input). In cases like this it would make sense to pass through the DOM-like event or a single value.

We also provide a couple of components that are composed of multiple form controls (like radio and checkbox groups). With these composite components we aggregate the values of all the form controls in the component into a single value. In this case, it wouldn't make sense to pass the control's DOM event through as it wouldn't represent the value of the entire "formsy" component.

I should probably have named the onChange prop differently to differentiate it from it's DOM event cousins. It was conceived as a callback for "the value of this formsy component has changed" (fired directly after a formsy setValue call). I think that's why I decided to use the formsy name prop as the initial param, but my exact motivation for that is lost in the mists of time.

Tim.

Ok, thanks for the explanation.

For anyone else who comes across this, I like what formsy-react-components provides for validation, but after trying to build my own "reusable system of validators", as mentioned on this redux-form FAQ page, it was easier and more intuitive than I thought.