jsx-a11y/no-static-element-interactions：如何使跨度可点击

Question

在我的项目中，我们有这几行代码：

    <span
      onClick={this.toggleEditing}
    >
      {this.state.value}
    </span>

不用说，它会在 eslint 中产生错误消息“可见的非交互式元素不应具有鼠标或键盘事件侦听器 jsx-a11y/no-static-element-interactions”。但是我不知道解决这种情况的最佳方法是什么，我们是否应该将其更改为按钮并将样式更改为看起来像一个跨度。我对这个问题真的没有太多经验。

Answer 1

查看文档，它精美地告诉您该怎么做。
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#how-do-i-resolve-this-error

对于您的情况，解决方案是添加 role="button"

<span onClick={this.toggleEditing} role="button">
  {this.state.value}
</span>