Add warnings on incorrect casing of event handler properties

[felixgirault]

Hi,

React currently warns about incorrect casing of properties like tabIndex.
However, it doesn't warn about this problem on event handlers, like onKeyDown.

Being used to the "html way" of writing those attributes, I often wrote something like onKeydown. Sadly, attached event handlers were not called, but I didn't get any warning from React, and it took me quite some time to find my mistake.

You can see an example here: http://jsfiddle.net/oj5eec84/.
Just focus on an element, and try to press a key.

[sophiebits]

Good idea, thanks.

[AnSavvides]

That would be useful - sounds like the kind of thing that a lot of people would be caught out by.

So this should apply to all topLevelTypes then. From a quick look, it seems like each of these raw browser signals are used in a variety of different places across the code base - does that mean we would need to add support for triggering a warning to each of those places, or is there a generic entry point where we could do that?

I am not too familiar with React's internal architecture when it comes to the event-side of things, so let me know if I am not making any sense :)

[zpao]

I think we only need this for DOM components (at least for now) - we attach the listeners here: https://github.com/facebook/react/blob/master/src/browser/ui/ReactDOMComponent.js#L272-L274 (we also do it later in _updateDOMProperties) so we can do some extra work to build up a list of incorrectly cased strings.

[mjackson]

This comes up fairly often in our training sessions, most often because someone uses onclick instead of onClick.

@bloodyowl Looks like you've got a good handle on it. Did you make a PR?

[bloodyowl]

@mjackson the remaining question is just this: should we only warn for any event name with the right letters but with wrong case anywhere or just full-lowercase event names

[jimbolla]

@bloodyowl I would prefer the first option. Since React seems to have a whitelist of valid attributes, it seems like it would be easy to project a "yellow list" of warnings by lowercasing the whitelist.

[bloodyowl]

@mjackson @jimbolla my PR has been updated.

[ali]

Attempted to solve this in PR #5361, based on @spicyj's recommendations in #3885.