jsx-eslint/eslint-plugin-react

[jsx-handler-names] Option to enforce only for class methods

Open

#358 ouverte le 11 déc. 2015

Voir sur GitHub
 (6 commentaires) (5 réactions) (0 assignés)JavaScript (8 630 stars) (2 797 forks)batch import
enhancementhelp wantedrule

Description

This is a useful rule, but it can sometimes get annoying when I want to use a prop or a method from a library directly as a handler. I think the real benefit to the rule is to force me to name my component's methods appropriately, but as it currently works, I sometimes need to do silly things like const handleSelect = props.entities.toggleItem;.

I would really like an option which prevents:

<MyComponent onChange={this.doSomething} />

// or in a stateless component:

<MyComponent onChange={doSomething} />

but still allows:

<MyComponent onChange={library.doSomething} />

<MyComponent onChange={this.props.doSomething} />

// or in a stateless component:

<MyComponent onChange={props.doSomething} />

Does that make any sense?

Guide contributeur

Stack technique
javascriptreact
Domaine
toolingdeveloper experiencefrontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
half day
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
Understanding of ESLint plugin developmentFamiliarity with React and JSX
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
50
Direction de recherche
The issue requests a new option for the 'jsx handler names' rule to allow non method handler references from props or library objects while still enforcing naming for class methods. The rule's source code is in the eslint plugin react repository; look for the rule definition in the 'lib/rules' directory. There are no linked PRs but there are 6 comments that may contain further discussion. To implement, consider adding a configuration option like 'ignoreMemberExpressions' or 'allowNonMethodHandlers' and update the rule logic accordingly.