Easily handle browser 'change' events

[fabiosantoscode]

Do you want to request a feature or report a bug? feature but I can send a PR

A gold nugget we're missing in the React toolbox is a new onChange event (with a separate name) that uses the native browser change event. It's not impressive, and it's not good for updating things as the user types, but it's great for validation.

Consider this case (which could be simplified greatly with a bit of metaprogramming):

<input onWhicheverEventName={e => { this.setState({ theValue: e.target.value }); this.validate() }} />

It doesn't make sense to use onInput here (which is what React is making me do currently). You would have to implement extra logic to detect two events, input and blur. This doesn't make sense to me, coming from implementing stuff in pure DOM for performance.

What is the current behavior?

No easy way in React to add a browser change event handler without a ref.

What is the expected behavior?

There should be a new event, pick your poison:

• onChangeAndBlur
• onChangeNative
• onChangeCompleted
• onCompleteChange

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? latest

[gaearon]

#9657

[fabiosantoscode]

@gaearon sorry, I started the issue before reading that and finished after reading it. I've changed the title to better explain what I'm saying. I want a separate event, not for a breaking change.

[jquense]

I'm curious why onBlur doesn't cover your usecase. Presumably in validation case you have the previous value to dedupe validation calls if really needed. In my experience tho it's usually cheap to run any validation s on blur

[fabiosantoscode]

@jquense it's slightly easier to use a change event. The user might not have changed the input and just be tabbing through empty fields. That would make all the required fields go red.

Deduping validation calls isn't hard, but it's easier to just use an event that tells you "hey this actually changed" especially in the middle of more complex logic.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!