Repository: yannickcr/eslint-plugin-react (js)

Issue:
react/jsx-handler-names should not trigger on "only"
The rule was triggered for a property `only`. I assume it checks for any prop key starting with `on`, but it would maybe make sense changing this to match `on[A-Z]` (i.e. camelcased keys) instead?

Pull request:
Prevent jsx-handler-names from incorrectly flagging `only`
The rule was triggered for a property `only`. This is because the regex
was checking for the prefix (by default "on") followed by any
characters. We can fix this by ensuring that the prefix we are checking
for is always followed by an uppercase character.

It was suggested in the issue that we might want to allow this rule to
accept a regex, which would allow for more flexibility in how this rule
is configured. I think this might be a nice enhancement, but since this
fix was so simple I decided to go with the quick and easy win at this
time.

Fixes #571

Patch:
diff --git a/lib/rules/jsx-handler-names.js b/lib/rules/jsx-handler-names.js
index 1c125874..4ed731ba 100644
--- a/lib/rules/jsx-handler-names.js
+++ b/lib/rules/jsx-handler-names.js
@@ -38,8 +38,8 @@ module.exports = {
     var eventHandlerPropPrefix = configuration.eventHandlerPropPrefix || 'on';
 
     var EVENT_HANDLER_REGEX = new RegExp('^((props\\.' + eventHandlerPropPrefix + ')'
-                                         + '|((.*\\.)?' + eventHandlerPrefix + ')).+$');
-    var PROP_EVENT_HANDLER_REGEX = new RegExp('^(' + eventHandlerPropPrefix + '.+|ref)$');
+                                        + '|((.*\\.)?' + eventHandlerPrefix + '))[A-Z].*$');
+    var PROP_EVENT_HANDLER_REGEX = new RegExp('^(' + eventHandlerPropPrefix + '[A-Z].*|ref)$');
 
     return {
       JSXAttribute: function(node) {


Test patch:
diff --git a/tests/lib/rules/jsx-handler-names.js b/tests/lib/rules/jsx-handler-names.js
index 111aaa00..8d8dbf1c 100644
--- a/tests/lib/rules/jsx-handler-names.js
+++ b/tests/lib/rules/jsx-handler-names.js
@@ -93,6 +93,11 @@ ruleTester.run('jsx-handler-names', rule, {
       '<TestComponent onChange={props.foo::handleChange} />'
     ].join('\n'),
     parser: 'babel-eslint'
+  }, {
+    code: [
+      '<TestComponent only={this.only} />'
+    ].join('\n'),
+    parserOptions: parserOptions
   }],
 
   invalid: [{
@@ -101,6 +106,18 @@ ruleTester.run('jsx-handler-names', rule, {
     ].join('\n'),
     parserOptions: parserOptions,
     errors: [{message: 'Handler function for onChange prop key must begin with \'handle\''}]
+  }, {
+    code: [
+      '<TestComponent onChange={this.handlerChange} />'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{message: 'Handler function for onChange prop key must begin with \'handle\''}]
+  }, {
+    code: [
+      '<TestComponent only={this.handleChange} />'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{message: 'Prop key for handleChange must begin with \'on\''}]
   }, {
     code: [
       '<TestComponent handleChange={this.handleChange} />'