web-dev-qa-db-fra.com

Comment ajouter un écouteur de clavier à mon gestionnaire onClick?

J'ai ce qui suit:

class MyTextArea extends React.Component {

  handleClick = () => {
    this.focus();
  }

  focus = () => this.ref.focus;

  handleRef = (component) => {
    this.ref = component;
  };

  render() {
    return (
      <div className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </div>
    );
  }
}

Mon CSS:

.magicHelper {
  width: 100%;
  height: 100%;
}
textarea {
  line-height: 32px;
}

J'en ai besoin car j'ai besoin que l'espace réservé de la zone de texte soit centré horizontalement et verticalement dans la page. Étant donné que les zones de texte ne peuvent pas centrer verticalement le texte, je dois garder la hauteur de la zone de texte courte. Je dois donc faire en sorte que lorsque l'utilisateur clique en dehors de la zone de texte, pensant qu'il clique sur la zone de texte, la zone de texte se concentre automatiquement.

Cela provoque une erreur eslint w: les gestionnaires de clics ont besoin d'au moins un écouteur de clavier. Comment puis-je mettre à jour ce qui précède pour passer eslint?

javascriptreactjstextareaeslint
8
AnApprentice

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

Il semble que cette règle vise à appliquer les normes d'accessibilité.

Sur cette base, changez votre code pour faire quelque chose comme ça

<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>

Vous pouvez également désactiver la règle dans eslint, je suppose que cela dépend de vos préférences.

10
Kaysser Kayyali

à partir des documents ESLINT:

Enforce onClick est accompagné d'au moins l'un des éléments suivants: onKeyUp, onKeyDown, onKeyPress. Le codage du clavier est important pour les utilisateurs handicapés physiques qui ne peuvent pas utiliser de souris, la compatibilité AT et les lecteurs d'écran.

dans ce cas, vous pouvez désactiver la règle ou mettre à jour votre code. il est préférable de mettre à jour votre code pour répondre aux normes Web.

 class MyTextArea extends React.Component {

      handleClick = () => {
        this.focus();
      }
      handleKeyDown = (ev) => {
          // check keys if you want
        if (ev.keyCode == 13) {
          this.focus()
         }
      }
      focus = () => this.ref.focus;

      handleRef = (component) => {
        this.ref = component;
      };

      render() {
        return (
          <div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
            <textarea></textarea>
          </div>
        );
      }
    }
7
hannad rehman