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

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

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

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

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

咏叹调隐藏=“真”

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

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

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

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