如何将键盘侦听器添加到我的onClick处理程序？

Question

我有以下几点：

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>
    );
  }
}

我的CSS：

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

我需要这样做，因为我需要将textarea的占位符在页面中水平和垂直居中。给定textareas不能使文本垂直居中，我需要使textarea的高度保持较短。因此，我需要做到这一点，以便当用户在文本区域之外单击时，以为他们在单击文本区域时，该文本区域会自动聚焦。

这会导致eslint错误w：单击处理程序至少需要一个键盘侦听器。如何更新以上内容以通过eslint？

Answer 1

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

看来这条规则是为了强制执行无障碍标准。

基于此，更改您的代码以执行以下操作

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

您也可以在eslint中禁用该规则，我想这取决于首选项。

Answer 2

我在提交 git 消息时遇到了这种问题。我当时有以下代码。

<span onClick={myHome}  className="home__home-header__mybb__mybb-links__ML1" >

为了避免它，我在元素中使用了以下属性。

咏叹调隐藏=“真”

Answer 3

从ESLINT文档中：

强制onClick伴随以下至少一项：onKeyUp，onKeyDown，onKeyPress。对于无法使用鼠标，AT兼容性和屏幕阅读器的肢体残疾用户，键盘编码很重要。

在这种情况下，您可以禁用规则或更新代码。最好更新代码以符合网络标准。

 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>
        );
      }
    }

Answer 4

使用 role、onKeyPress 和 tabIndex 属性指示元素的角色：

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
  Save
</div>

Answer 5

您可以通过添加至少一个键盘侦听器来传递 ESLint 警告/错误，正如Kaysser所回答的那样。但我宁愿在这里解决真正的问题，即在浏览器和屏幕阅读器无法识别为可点击的元素上具有点击和键盘侦听器。

错误消息（“具有单击处理程序的可见的非交互式元素必须至少有一个键盘侦听器”）在您考虑时描述了很多；您已经向一个元素添加了一个点击处理程序，该元素用于显示信息而不是供用户与之交互。除了添加键盘侦听器之外，您还应该将光标更改为悬停时的指针，添加 tabindex、role 等，使其易于访问和理解。

解决此问题的最佳方法是将div元素更改为 a button，既解决了 ESLint 警告，同时也告诉所有浏览器和屏幕阅读器这是一个交互式元素，您可以使用各种指针（鼠标、键盘、手指、手写笔）单击它.

class MyTextArea extends React.Component {
  render() {
    return (
      <button className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </button>
    );
  }
}