reactjs - jsx-a11y/无静态元素交互 : how to make span clickable

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>