如何将键盘监听器添加到我的 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 之外单击时，认为他们正在单击 textarea，textarea 自动聚焦。

这会导致 ESLint 错误：

"Visible, non-interactive elements with click handlers must have at least one keyboard listener" 。

如何更新以上内容以通过 eslint？

原文由 AnApprentice 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 中的规则，我想这取决于偏好。

原文由 Kaysser Kayyali 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

来自 ESLINT 文档：

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

原文由 hannad rehman 发布，翻译遵循 CC BY-SA 3.0 许可协议